/* ==========================================================================
   tokens.css — RAFA COIMBRA
   Direção "Sépia" — preto quente alternando com creme, acento laranja.
   Referência de estrutura e atmosfera: ReelVision Films (não de cópia).

   O que separa isto do projeto do Pablo, de propósito:
     · preto QUENTE (#100E0C), não neutro
     · faixas CREME cobrindo ~40% da página, não escuro do topo ao rodapé
     · laranja saturado, não dourado pálido
     · ZERO serifada — display é Figtree 800 em caixa alta
     · fotografia como material principal, com gradação única

   Todo contraste anotado foi CALCULADO pela WCAG 2.2. Confira em _dev/tokens.html.
   ========================================================================== */

:root {

  /* --- Faixa escura ------------------------------------------------------*/
  --ink:            #100E0C;   /* preto quente — base                       */
  --ink-raised:     #1A1714;   /* card sobre escuro                         */
  --ink-high:       #241F1A;   /* elevação extra                            */
  --ink-deep:       #0A0908;   /* rodapé                                    */
  --ink-line:       #2C2621;   /* divisor decorativo no escuro              */
  --ink-line-ui:    #6E6459;   /* borda de CONTROLE no escuro — 3,33:1      */
  --ink-text:       #F4F0E9;   /* 16,96:1 · AAA                             */
  --ink-muted:      #A9A096;   /*  7,48:1 · AAA                             */

  /* --- Faixa clara ------------------------------------------------------*/
  --cream:          #F2EDE4;   /* creme — base clara                        */
  --cream-raised:   #FFFFFF;   /* card sobre creme                          */
  --cream-line:     #DDD5C8;   /* divisor decorativo no claro               */
  --cream-line-ui:  #8C8378;   /* borda de CONTROLE no claro — 3,20:1       */
  --cream-text:     #171310;   /* 15,84:1 · AAA                             */
  --cream-muted:    #5D554C;   /*  6,28:1 · AA                              */

  /* --- Acento -----------------------------------------------------------
     DOIS tokens, não um. O laranja vivo reprova sobre creme (2,26:1).      */
  --orange:         #E8873A;   /* SÓ sobre escuro   ·  7,30:1 · AAA         */
  --orange-deep:    #A34E12;   /* SÓ sobre creme    ·  4,93:1 · AA          */
  --orange-hi:      #F5A45E;   /* hover no escuro                           */

  /* --- Funcional --------------------------------------------------------*/
  --whats:          #25D366;   /* rótulo em --ink: 9,71:1 · AAA             */

  /* --- Papéis correntes -------------------------------------------------
     As seções trocam estes quatro. Componentes leem SÓ daqui, nunca dos
     tokens de faixa acima — é isso que faz um card servir nas duas faixas. */
  --bg:        var(--ink);
  --bg-raised: var(--ink-raised);
  --line:      var(--ink-line);
  --line-ui:   var(--ink-line-ui);
  --text:      var(--ink-text);
  --muted:     var(--ink-muted);
  --accent:    var(--orange);
  --accent-hi: var(--orange-hi);
  --on-accent: var(--ink);

  /* --- Tipografia -------------------------------------------------------
     UMA família. Figtree é variável 300–900, então o display é ela mesma
     em peso 800 e caixa alta. Sem serifada: era metade da semelhança com
     o projeto do Pablo.                                                    */
  --font: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Teto baixado de 5rem para 3.375rem: a 80px o H1 ocupava 6 linhas no
     desktop e esmagava a foto ao lado. Medido em 1318px. */
  --fs-h1:      clamp(2.125rem, 3.6vw, 3.375rem);
  --fs-h2:      clamp(1.625rem, 3vw, 2.5rem);
  --fs-h3:      1.0625rem;
  --fs-eyebrow: 0.75rem;
  --fs-body-l:  1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.8125rem;
  --fs-button:  0.8125rem;
  --fs-numeral: 0.8125rem;
  --fs-rail:    0.6875rem;

  --w-display: 800;
  --w-body:    400;
  --w-semi:    600;

  --lh-h1: 0.98;  --lh-h2: 1.06;  --lh-h3: 1.35;
  --lh-body: 1.7; --lh-tight: 1.4;

  --ls-h1: -0.025em;  --ls-h2: -0.02em;  --ls-h3: 0.005em;
  --ls-eyebrow: 0.2em; --ls-button: 0.09em; --ls-rail: 0.22em;

  --measure: 62ch;

  /* --- Espaçamento · base 4px -------------------------------------------*/
  --sp-1: 4px;    --sp-2: 8px;    --sp-3: 12px;   --sp-4: 16px;
  --sp-6: 24px;   --sp-8: 32px;   --sp-12: 48px;  --sp-16: 64px;
  --sp-24: 96px;  --sp-32: 128px; --sp-40: 160px;

  --section-y:  var(--sp-16);
  --container:  1240px;
  --gutter:     20px;
  --rail:       0px;            /* trilho numerado: só existe em ≥1024      */
  --grid-gap:   20px;
  --card-pad:   var(--sp-6);

  /* --- Geometria --------------------------------------------------------
     Mais reto que o projeto anterior. Cinema, não joalheria.               */
  --radius-sm:   0px;
  --radius-md:   2px;
  --radius-lg:   3px;
  --radius-pill: 2px;
  --border:      1px;

  /* --- Movimento --------------------------------------------------------*/
  --ease:     cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast: 180ms;
  --dur-mid:  260ms;
  --dur-slow: 560ms;
  --stagger:  70ms;

  --focus-ring:   2px solid var(--accent);
  --focus-offset: 3px;

  --z-header: 100;
  --z-drawer: 200;
  --z-float:  150;
}

/* --- Troca de faixa ------------------------------------------------------
   Uma classe repinta a seção inteira remapeando os papéis correntes.       */
.faixa-creme {
  --bg:        var(--cream);
  --bg-raised: var(--cream-raised);
  --line:      var(--cream-line);
  --line-ui:   var(--cream-line-ui);
  --text:      var(--cream-text);
  --muted:     var(--cream-muted);
  --accent:    var(--orange-deep);
  --accent-hi: var(--orange-deep);
  --on-accent: #FFFFFF;
}

@media (min-width: 768px) {
  :root {
    --section-y: var(--sp-32);
    --gutter:    32px;
    --grid-gap:  var(--sp-8);
    --card-pad:  var(--sp-8);
  }
}
@media (min-width: 1024px) {
  :root { --rail: 68px; }
}