/* =========================================================================
   1. TOKENS - apenas custom properties. Nenhum seletor de componente aqui.
   Ordem de carregamento: tokens -> base -> components -> sections.
   ========================================================================= */


:root {

  /* --- Marca -------------------------------------------------------------
     Escala ancorada nas cores extraídas dos arquivos oficiais da marca.
     As quatro marcadas como OFICIAL vieram direto do logotipo e do selo;
     as demais são degraus interpolados para compor a escala.

     Não há laranja na identidade da Cruzeiro do Sul Virtual: o antigo
     #FF6600 vinha da LP de referência do Polo Osasco, não do manual. */
  --brand-900: #0A1730;
  --brand-800: #12244A;   /* OFICIAL: fundo do selo Polo Oficial */
  --brand-700: #143C6A;   /* OFICIAL: navy do texto "Cruzeiro do Sul" */
  --brand-600: #016198;   /* OFICIAL: azul da faixa "Polo Oficial". Cor de ação */
  /* Degrau de hover do azul de acao. So existe para :hover. */
  --brand-650: #01547F;
  --brand-500: #1E96D2;   /* OFICIAL: azul claro de "Virtual" */
  --brand-400: #55B0DF;
  --brand-300: #93CBEB;
  --brand-100: #D9EDF8;
  --brand-50:  #F0F8FC;

  /* Acento: o turquesa que abre o gradiente do símbolo.
     Atenção de acessibilidade: --accent-500 sobre branco dá 2,69:1 e NÃO
     serve para texto. Para texto use --accent-700 (4,88:1). Como
     preenchimento de botão, --accent-500 pede texto escuro (6,96:1). */
  --accent-700: #2E7C7F;
  --accent-500: #53ABAE;   /* OFICIAL: turquesa do gradiente */
  --accent-100: #DDF0F1;

  /* Degrau de hover do verde WhatsApp, antes literal em dois lugares. */
  --wa-600:    #1FBA5A;
  --wa-500: #25D366;

  /* --- Neutros -----------------------------------------------------------
     Slate levemente frio, para casar com o azul da marca. */
  --ink-900: #0B1220;
  --ink-800: #131C2E;
  --ink-700: #28334A;
  --ink-600: #48546E;
  --ink-500: #626E85;   /* 5.14:1 sobre branco e 4.87:1 sobre --paper-alt: passa AA nos dois fundos */
  --ink-400: #98A2B8;
  --ink-300: #CBD3E1;
  --ink-200: #E4E9F1;
  --ink-100: #F2F5F9;
  --paper:     #FFFFFF;
  --paper-alt: #F4F7FC;

  /* --- Semanticas -------------------------------------------------------- */

  --ok:   #0F7A43;
  --ok-bg:      #DCFCE7;   /* fundo do selo de sucesso, antes literal em dois arquivos */
  /* Aviso: a paleta ambar estava inteira fora do sistema, em tres
     literais dentro de components.css. Tom de alerta e o unico papel
     semantico que faltava ao lado de --ok e --err. */
  --warn:       #78350F;
  --warn-bg:    #FFFBEB;
  --warn-borda: #FDE68A;
  --err:  #B3261E;
  --err-bg: #FDF2F2;

  /* --- Tipografia --------------------------------------------------------
     Bricolage Grotesque (display, variavel com eixo opsz) + Archivo (texto).
     Escolhidas para não repetir Inter/Montserrat (LP Osasco) nem
     Outfit/Plus Jakarta (LP UniFECAF), mantendo leitura alta no mobile. */
  --font-display: 'Bricolage Grotesque', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-text:    'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  /* Escala fluida, ancorada em 360px -> 1440px de viewport. */
  --fs-xs:   clamp(0.75rem,   0.723rem + 0.12vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem,  0.848rem + 0.12vw, 0.9375rem);
  --fs-base: clamp(1rem,      0.963rem + 0.17vw, 1.0625rem);
  --fs-md:   clamp(1.0625rem, 0.994rem + 0.30vw, 1.1875rem);
  --fs-lg:   clamp(1.25rem,   1.148rem + 0.45vw, 1.5rem);
  --fs-xl:   clamp(1.5rem,    1.310rem + 0.84vw, 2rem);
  --fs-2xl:  clamp(1.875rem,  1.560rem + 1.40vw, 2.75rem);
  --fs-3xl:  clamp(2.375rem,  1.980rem + 1.76vw, 3.4rem);

  --lh-tight:  1.08;
  --lh-snug:   1.2;
  --lh-normal: 1.55;

  --ls-tight:  -0.028em;
  --ls-snug:   -0.012em;
  --ls-caps:   0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* --- Espaco ------------------------------------------------------------
     Base 4px. Use os degraus; não invente valores soltos. */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  /* Degrau intermediario, so para o espaco entre campos de formulario:
     16px aperta e 24px solta o bloco. Em 20px os campos leem como um grupo
     unico, e a razao com o padding do cartao fica em torno de 1,6. */
  --sp-4b: 20px;
  --sp-9: 96px;  --sp-10: 128px;

  /* Ritmo macro. As secoes precisam ler como capitulos distintos, nao como
     blocos empilhados. O valor compacto existe para a faixa de provas, para
     o ritmo nao virar metronomo. */
  --section-y: clamp(64px, 7.5vw, 112px);
  --section-y-curto: clamp(32px, 4vw, 48px);
  --gutter:    clamp(20px, 5vw, 40px);
  --container: 1200px;
  --measure:   62ch;

  /* --- Forma -------------------------------------------------------------
     Sistema único e documentado (regra de consistencia de forma):
       - interativos em pilula ....... --r-pill
       - cartoes e paineis ........... --r-lg  (20px)
       - campos de formulário ........ --r-md  (12px)
       - detalhes pequenos ........... --r-sm  (8px)
     Não misture fora dessa regra. */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* Aninhamento duplo (casca externa + nucleo interno). O raio interno e o
     externo menos a espessura da casca, senao as curvas nao ficam
     concentricas e o olho percebe o desalinhamento mesmo sem saber nomear. */
  --casca:    6px;
  --r-nucleo: calc(var(--r-2xl) - var(--casca));   /* 26px */

  /* Três elevações. Os aliases preservam os componentes existentes. */
  --sh-xs: 0 1px 3px rgba(18, 36, 74, .05);
  --sh-md: 0 4px 18px -8px rgba(18, 36, 74, .13);
  --sh-xl: 0 18px 48px -20px rgba(18, 36, 74, .22);
  --sh-sm: var(--sh-xs);
  --sh-lg: var(--sh-md);
  --sh-brand: var(--sh-xs);
  --glow-marca: var(--sh-md);
  --glow-wa: var(--sh-md);
  --realce: inset 0 1px 0 rgba(255, 255, 255, .8);
  --ring: 0 0 0 3px rgba(1, 97, 152, .25);
  --fio: rgba(20, 60, 106, .12);

  /* --- Movimento ---------------------------------------------------------
     MOTION_INTENSITY 4: transicoes fluidas e revelacoes no scroll.
     Sem parallax, sem scroll hijack, sem loop infinito. */
  --ease:     cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 140ms;
  --dur:      260ms;
  --dur-media: 380ms;
  --dur-slow: 380ms; /* revelacao de entrada, nao micro-interacao */

  /* --- Camadas -----------------------------------------------------------
     Escala fechada. Não escreva z-index avulso fora destes tokens. */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-float: 150;
  --z-modal: 200;

  --header-h: 68px;

  /* Altura da barra de ações fixa do celular (botão de 46px mais o padding).
     Existe como token porque o rodapé precisa reservar exatamente este
     espaço: com o número solto, mudar o botão descolava as duas medidas e o
     último conteúdo do rodapé acabava coberto. */
  --barra-movel-h: 74px;
}

/* Movimento reduzido: zera as duracoes na raiz, então todo componente que
   usa --dur herda o desligamento sem precisar de regra propria. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-media: 0.01ms;
    --dur-slow: 0.01ms;
  }
}