/* =============================================================
   Squad Film — Design Tokens
   Cinema de Performance
   ============================================================= */

/* ---------- Typefaces ---------- */
/* Escala oficial Squad Film: apenas Light (300) + Regular (400).
   O contraste de hierarquia vem de tamanho, opacidade e cor — não de peso. */
@font-face {
  font-family: "Britti Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/BrittiSans-Light.otf") format("opentype");
}
@font-face {
  font-family: "Britti Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/BrittiSans-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Britti Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/BrittiSans-RegularItalic.otf") format("opentype");
}

/* ---------- Tokens ---------- */
:root {
  /* Core surfaces */
  --squad-black: #0A0A0A;            /* dominant institutional bg */
  --squad-white: #FFFFFF;            /* light bg / type on dark */
  --carbon-900: #111111;             /* alt dark bg */
  --carbon-700: #2A2A2A;
  --carbon-500: #525252;
  --carbon-300: #A3A3A3;
  --carbon-100: #F5F5F5;

  /* Accents */
  --squad-cyan:   #06B6D4;           /* digital UI, plataforma, motion */
  --squad-blue:   #00AEEF;           /* call-out / aviso ao mercado */
  --squad-cyan-dna: #1AA7D4;         /* separador "//", DNA mark */
  --squad-amber:  #C9A84C;           /* acento cinematográfico / hora mágica */
  --warm-white:   #F5F0E8;           /* editorial light bg */

  /* Semantic — dark mode default */
  --bg:            var(--squad-black);
  --bg-alt:        var(--carbon-900);
  --bg-elev:       var(--carbon-700);
  --fg:            var(--squad-white);
  --fg-muted:      var(--carbon-300);
  --fg-subtle:     var(--carbon-500);
  --rule:          rgba(255,255,255,0.08);
  --rule-strong:   rgba(255,255,255,0.16);
  --accent:        var(--squad-cyan);
  --accent-loud:   var(--squad-blue);
  --accent-warm:   var(--squad-amber);

  /* Type family */
  --font-sans: "Britti Sans", system-ui, -apple-system, sans-serif;

  /* Type scale */
  --fs-hero:    160px;   /* H1 Hero 120–180 */
  --fs-h1:      84px;    /* H1 Padrão 72–96 */
  --fs-h2:      56px;    /* H2 48–64 */
  --fs-h3:      32px;    /* H3 28–36 */
  --fs-body-lg: 22px;    /* 20–24 */
  --fs-body:    17px;    /* 16–18 */
  --fs-caption: 13px;    /* 12–14 */

  /* Line heights */
  --lh-hero: 0.95;
  --lh-h1:   1.0;
  --lh-h2:   1.05;
  --lh-body: 1.5;

  /* Tracking */
  --tr-hero:    -0.02em;
  --tr-caption:  0.04em;

  /* Spacing (8px base) */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   16px;
  --s-4:   24px;
  --s-5:   32px;
  --s-6:   48px;
  --s-7:   64px;
  --s-8:   96px;
  --s-9:   128px;
  --s-10:  192px;
  --s-11:  256px;

  /* Radius — Squad é cinema, não app fofo */
  --r-sharp: 0;
  --r-soft:  4px;     /* plataforma Squad Hub cards */
  --r-pill:  9999px;  /* CTAs UI digital */

  /* Motion */
  --ease-expo:  cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-expo */
  --ease-cubic: cubic-bezier(0.65, 0, 0.35, 1);   /* ease-in-out-cubic */
  --d-ui:    400ms;
  --d-ui-lg: 700ms;
}

/* Editorial / warm palette flip when needed */
.theme-editorial {
  --bg:        var(--warm-white);
  --bg-alt:    #EDE6D8;
  --fg:        var(--squad-black);
  --fg-muted:  var(--carbon-500);
  --rule:      rgba(10,10,10,0.10);
  --accent:    var(--squad-amber);
}

/* ---------- Anti-bold guard (mandatory) ---------- */
*,
*::before,
*::after { font-synthesis: none; }

b, strong,
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/* ---------- Semantic element rules ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-hero);
  margin: 0;
}
h1.hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
}
h2 {
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.015em;
  margin: 0;
}
h3 {
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.15;
  margin: 0;
}
p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.45;
}
.caption {
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caption);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.mono-dna::before { content: "// "; color: var(--squad-cyan-dna); }

/* Hierarquia sem peso: cor/tamanho/opacidade substituem o 500/600 */
.h-accent { font-weight: 400; color: #fff; }
.h-neutral { font-weight: 300; color: rgba(255,255,255,0.55); }

/* Rules / separators */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}