/* =============================================================================
   TOKENS — todo o sistema visual em um lugar só.
   Trocar a marca = trocar estes valores. Nenhum hex solto no resto do CSS.
   ========================================================================== */

:root {
  /* --- Cor: fundos -------------------------------------------------------- */
  --bg-dark:        #060606;   /* fundo dominante escuro                       */
  --bg-darker:      #000000;   /* preto puro (Ato 2)                           */
  --bg-light:       #F0F0F0;   /* seção clara / rodapé                         */
  --bg-light-warm:  #E9E9E7;   /* claro levemente quente (cena da marca)       */
  --bg-light-cool:  #D6D6D6;   /* cinza claro (cena dos trilhos)               */
  --surface:        #FFFFFF;   /* cartões                                      */
  --surface-mute:   #F2F2F2;   /* linha de cartão em repouso                   */
  --surface-night:  #101110;   /* superfície dos detalhes da Starth            */
  --surface-mesters:#0B0D0D;   /* superfície mais profunda do Mesters           */

  /* --- Cor: tinta --------------------------------------------------------- */
  --ink:            #111111;   /* texto display em fundo claro                 */
  --ink-deep:       #0A0A0A;   /* texto forte em cartão                        */
  --paper:          #FFFFFF;   /* texto em fundo escuro                        */
  --paper-warm:     #F0EDE6;   /* off-white quente do headline do herói        */

  /* --- Cor: cinzas -------------------------------------------------------- */
  --grey-label:     #9A9A9A;   /* rótulos mono                                 */
  --grey-mute:      #888888;   /* linhas de extrato em repouso                 */
  --grey-soft:      #B5B5B5;
  --grey-tick:      #C8C8C8;   /* barras do código de barras                   */
  --grey-ghost:     #D8D8D8;   /* marquee gigante do rodapé                    */
  --grey-noise:     #232323;   /* ruído mono sobre escuro                      */

  /* --- Cor: acentos -------------------------------------------------------
     São TRÊS papéis, cada um com um trabalho só:

     MARCA (#C5FF00)  o verde do Masogo. Um único verde na página inteira —
                      tarja, ganho, capacidade e botões, tudo sai daqui.
     PERDA (laranja)  o custo do modelo antigo. Toda informação negativa.
     APOIO (azul)     a segunda positiva, para o olho separar duas famílias
                      de ganho dentro do mesmo bloco sem inventar outro verde.

     Cada papel tem variantes porque a página alterna fundos escuros e claros:
     a cheia é para PREENCHIMENTO e para TEXTO sobre escuro; a `-ink` é a única
     que sobrevive como TEXTO sobre claro; a `-mid` é o preenchimento sobre
     claro. Trocar uma pela outra apaga o texto — o verde puro sobre branco
     fica em ~1.2:1, e ele é claro demais para receber branco por cima.        */
  --brand:          #C5FF00;   /* o verde da marca — fill e texto sobre escuro */
  --brand-mid:      #9DCE00;   /* rebaixado — PREENCHIMENTO/fio sobre claro    */
  --brand-ink:      #5F7D00;   /* legível como TEXTO sobre claro               */
  --brand-soft:     rgba(197, 255, 0, 0.22);
  --on-brand:       #1A2200;   /* tinta POR CIMA de preenchimento da marca     */

  --warn:           #FF6A00;   /* laranja — perda, custo, modelo antigo        */
  --warn-ink:       #C24A00;   /* laranja legível como TEXTO sobre claro       */
  --warn-soft:      rgba(255, 106, 0, 0.22);

  --accent:         #3D6BFF;   /* azul — a segunda positiva                    */
  --accent-ink:     #1E3FCC;   /* azul legível como TEXTO sobre claro          */
  --accent-soft:    rgba(61, 107, 255, 0.22);
  --mesters:        #D8C7AD;   /* detalhe quente e contido do programa seletivo */
  --mesters-ink:    #34291E;

  /* --- Tipografia --------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono-ui: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala display — clamp para escalar do mobile ao desktop sem quebra */
  --t-display-xl: clamp(38px, 6.25vw, 90px);   /* título extra grande          */
  --t-display-lg: clamp(37px, 6.1vw,  88px);   /* título grande                */
  --t-display-md: clamp(34px, 5.55vw, 80px);   /* título médio                 */
  --t-display-sm: clamp(32px, 4.72vw, 68px);   /* título compacto              */
  --t-headline:   clamp(27px, 3.75vw, 54px);   /* chamada de seção             */
  /* A headline do herói fecha dentro de UM TERÇO da tela — o rosto começa em
     ~34% e o texto nunca chega nele. O corpo cai junto com a coluna (ambos em
     vw), então a linha mais longa continua enchendo a medida em qualquer tela. */
  --t-hero:       clamp(16px, 1.78vw, 30px);   /* headline da varredura        */
  --t-mono-title: clamp(23px, 2.87vw, 41px);   /* título monoespaçado          */
  --t-mono-lead:  clamp(15px, 1.39vw, 20px);   /* bullets do Ato 3            */
  --t-body:       clamp(15px, 1.25vw, 18px);
  --t-data:       13px;
  --t-label:      11px;
  --t-marquee:    clamp(120px, 23.6vw, 340px);

  --lh-display: 1.04;
  --lh-body:    1.4;
  --lh-data:    1.7;

  --ls-display: -0.012em;
  --ls-label:    0.12em;
  --ls-mono:     0.02em;

  /* --- Ritmo e layout ----------------------------------------------------- */
  --pad-x:      clamp(20px, 4.2vw, 60px);
  --gutter:     24px;
  --maxw:       1440px;

  /* --- Duração do scroll de cada ato (múltiplos de viewport) -------------- */
  --scroll-act1: 280vh;
  --scroll-act2: 300vh;
  --scroll-act3: 360vh;

  /* --- Motion ------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hard: cubic-bezier(0.83, 0, 0.17, 1);
  --dur-micro: 200ms;
  --dur-norm:  460ms;
}

/* A página é uma peça escura por decisão de direção — não inverte com o tema.
   Fixamos o esquema para o navegador não repintar controles de forma inesperada. */
:root { color-scheme: dark; }