/* ==========================================================================
   TOKENS.CSS
   Custom properties (design tokens) — copiado literalmente de
   01-design-system.md. Fonte da verdade: Figma (fileKey nlrb7GRvl6EfWyxF8sydaj).
   Não editar valores aqui sem atualizar o doc de design system primeiro.
   ========================================================================== */

:root {
  /* Paleta aplicada — usar estas como padrão em toda a página */
  --bg-primary: #f2f7fc;       /* branco BG (body) */
  --text-white: #ffffff;       /* branco dos textos (sobre fundo escuro) */
  --text-black: #19232d;       /* preto texto */
  --bg-black: #19232d;         /* preto BG (seções escuras) */
  --button-bg: #384d65;        /* azul botão */
  --button-text: #ffffff;      /* texto do botão — unificado com --text-white */
  --icon-white: #f2f7fc;       /* ícone/logo continuam #f2f7fc, não são texto */
  --logo-white: #f2f7fc;

  /* ⚠️ Regra: TODO texto branco na página usa --text-white (#ffffff), sem exceção
     — inclusive o texto do botão. Só ícone e logo mantêm #f2f7fc. */

  /* ⚠️ Correção: botão primário NÃO é vermelho. É --button-bg (#384d65)
     com --button-text (#f2f7fc). Vermelho fica reservado só pro badge
     "Evite" do Método 5/10/15 e pra destaques pontuais de urgência/oferta. */

  /* ⚠️ Inconsistência corrigida: #fbf8fc (9 usos no protótipo) está mais
     próximo de --bg-primary (#f2f7fc) do que de qualquer outro token —
     comparação de canal R/G/B confirma. Padronizado para --bg-primary.
     (Revisão da versão anterior deste doc, que tinha mapeado errado pro
     vermelho — corrigido nesta versão.) */

  /* Marca — uso pontual, não é cor de botão */
  --brand-primary: #d91425;          /* vermelho — badge "Evite", destaque de oferta */
  --brand-primary-hover: #fbe8e9;    /* tint claro do vermelho */
  --brand-secondary: #597a9f;

  /* Semântico (Nutrevocê: Bom / Moderado / Evite) */
  --semantic-success: #599f5b;       /* Bom */
  --semantic-warning: #fed82c;       /* Moderado */
  --semantic-danger: #d91425;        /* Evite */

  /* Neutros (uso estendido/apoio, não é a paleta principal) */
  --neutral-900: #19232d;
  --neutral-800: #202c3a;
  --neutral-700: #283748;
  --neutral-600: #304156;
  --neutral-500: #384d65;
  --neutral-400: #5c6d81;
  --neutral-300: #828f9e;
  --neutral-200: #a9b2bd;
  --neutral-100: #cfd4da;
  --neutral-white: #ebedf0;

  /* Paletas de apoio (uso pontual — ilustrações, ícones, estados) */
  --blue-1: #f2f7fc; --blue-2: #e0ebf8; --blue-3: #c7dbf2; --blue-4: #adcbeb; --blue-5: #94bbe6;
  --blue-6: #7dace0; --blue-7: #6a92be; --blue-8: #597a9f; --blue-9: #476280; --blue-10: #384d65;

  --red-1: #fbe8e9; --red-2: #f6c7cb; --red-3: #ef9aa1; --red-4: #e76b76; --red-5: #e03e4c;
  --red-6: #d91425; --red-7: #b8111f; --red-8: #9a0e1a; --red-9: #7c0b15; --red-10: #620911;

  /* Gradiente de marca — usado como borda fina (gradient-border: box da Dor,
     cards da Prova Social) e como fundo sólido em cards/etiquetas maiores
     (card da Oferta, etiqueta da Sou Bruna). Um único gradiente pros dois
     casos, conferido direto no PNG de referência. */
  --gradient-brand: linear-gradient(38deg, #d91425 28.55%, #7dace0 71.62%);

  /* Gradientes de faixa do Método 5/10/15 — cada faixa tem o próprio, não
     reaproveita o --gradient-brand */
  --gradient-baixa: linear-gradient(270deg, #89e07d 0%, #599f5b 100%);
  --gradient-moderada: linear-gradient(270deg, #fed82c 0%, #98811a 100%);
  --gradient-alta: linear-gradient(90deg, #d91425 0%, #e76b76 100%);

  /* Borda verde→vermelho — usada só no último card da Seção 03 (Resultado),
     "Mesmo se esquecer", pra sinalizar alerta. Não é --gradient-alta (essa é
     vermelho→vermelho claro); é verde (mesma cor de --gradient-baixa) até
     vermelho, conferido no PNG de referência. */
  --gradient-verde-vermelho: linear-gradient(270deg, #89e07d 0%, #d91425 100%);

  /* Fundo do card do carrossel (Seção 04 — O que você recebe). Redesenho:
     antes era só um overlay horizontal na base do card (--gradient-carrossel-
     overlay, removido); agora o gradiente cobre o card inteiro, diagonal
     ~128°, stops 20%/80% (CSS do Figma). */
  --gradient-carrossel-card:linear-gradient(38deg, #D91425 28.55%, #7DACE0 71.62%);

  /* Badge numérico do card do carrossel — mesmas cores de --gradient-baixa,
     mas vertical (180deg) em vez de 270deg, então não dá pra reaproveitar o
     token direto (CSS do Figma, tabela de degradês). */
  --gradient-carrossel-badge: linear-gradient(180deg, #89e07d 0%, #599f5b 100%);

  /* Card da página link-bio (index.html na raiz). Ajustado pra mesma
     geometria de --gradient-brand (38°, stops 28.55%/71.62%), a pedido. */
  --gradient-link-bio-card: linear-gradient(38deg, #d91425 28.55%, #7dace0 71.62%);

  /* Card do Nutrevocê na mesma página link-bio — mesma geometria do
     --gradient-title do Nutrevocê (284deg, verde→navy), não o vermelho/
     azul do card da Rótulo Simples acima. */
  --gradient-link-bio-card-nutrevoce: linear-gradient(284deg, #599f5b 19.6%, #202c3a 80.4%);

  /* Raio de borda — padrão único documentado */
  --radius-default: 12px; /* cards, botões, inputs */

  /* Superfície de card sobre fundo escuro — cor intencional e distinta de
     --bg-primary, não substituir. Usada nos cards do FAQ (Seção 10). Ver
     correção em correcao-secoes-07-10.md. */
  --surface-card: #fbf8fc;
}

:root {
  /* Container e espaçamento — fonte única: docs/05-skill-landing-pages-uxui.md
     seções 4-8. Substitui o antigo --sp-*, não coexistem (regra 53 do skill). */
  --container-max: 1200px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
}

:root {
  /* Tipografia — fallback com métricas ajustadas (size-adjust/ascent-override/
     descent-override, ver @font-face em base.css) entra ANTES do genérico,
     pra reduzir o CLS do FOUT (fonte real troca a de fallback e empurra o
     conteúdo abaixo — medido ~46px de shift no hero, ver base.css). */
  --font-display: 'Fraunces', 'Fraunces Fallback', serif;   /* títulos, headline */
  --font-body: 'Montserrat', 'Montserrat Fallback', sans-serif; /* corpo, botões, labels */
}

/* Breakpoints — fonte única: docs/Design_System_Landing_Page.xlsx (aba "Regras")
   + aba "Design System". Custom properties não funcionam dentro de @media,
   então ficam só documentados aqui como referência:
   mobile 0-767px (padrão, sem media query), tablet 768px+, desktop 1024px+,
   large desktop 1280px+, e um 5º breakpoint 1440px+ (colunas da planilha
   divergem de 1280px em várias linhas: padding lateral, gap de seção etc.).
   320/375/390/414px são cenários de teste, não breakpoints — não criar
   media query pra eles. */

:root {
  /* Escala tipográfica — tamanhos documentados na tabela de 01-design-system.md
     (peso aplicado via CSS de cada elemento, não faz parte do token de tamanho) */
  --text-hero: 60px;        /* Montserrat ExtraBold — número/estatística de destaque no Hero */
  --text-display-lg: 32px;  /* Fraunces Black/Regular — título grande de seção */
  --text-display-md: 24px;  /* Fraunces SemiBold/Regular — título médio */
  --text-body-lg: 16px;     /* Montserrat SemiBold — texto padrão, destaques */
  --text-body: 16px;        /* Montserrat Regular — texto padrão */
  --text-body-sm: 14px;     /* Montserrat Regular/SemiBold — texto pequeno, legendas */
  --text-micro: 12px;       /* Montserrat SemiBold/ExtraBold — labels, badges, metadados */
}