/* ==========================================================================
   KRYO — TOKENS
   Único arquivo do projeto autorizado a conter valor de cor literal.
   Qualquer outro CSS referencia daqui via var().

   Fase 1: os valores abaixo reproduzem exatamente a identidade escura atual.
   Fase 2: a repaginação troca VALOR, não nome. Nenhum seletor muda.

   Ordem das camadas — declarada aqui porque este é o primeiro arquivo
   carregado. Torna a cascata explícita e imune a briga de especificidade.
   ========================================================================== */

@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    /* ----------------------------------------------------------------
       1. CANAIS RGB — a raiz da paleta.
       Tudo que precisa de transparência deriva daqui via
       rgb(var(--rgb-x) / <alpha>). Trocar estes canais na Fase 2
       reposiciona o site inteiro sem tocar em nenhum componente.
       ---------------------------------------------------------------- */
    --rgb-ground: 0 0 0; /* fundo da página */
    --rgb-ink: 255 255 255; /* tinta sobre o fundo */
    --rgb-brand: 6 182 212; /* ciano — acento principal */
    --rgb-brand-strong: 34 211 238; /* variante de ênfase (hover, foco).
                                     No escuro é MAIS clara; num tema claro
                                     será mais escura. O nome não fala de
                                     luminosidade, só de ênfase. */
    --rgb-brand-deep: 37 99 235; /* azul — fim do gradiente */
    --rgb-support: 59 130 246; /* azul de apoio */
    --rgb-danger: 239 68 68;
    --rgb-success: 74 222 128;
    --rgb-info: 96 165 250;
    --rgb-alt: 168 85 247;
    --rgb-whats: 37 211 102; /* verde WhatsApp — cor de marca de terceiro */
    --rgb-panel: 17 24 39; /* painel elevado, usado com alfa */

    /* ----------------------------------------------------------------
       2. SUPERFÍCIES
       ---------------------------------------------------------------- */
    --c-ground: rgb(var(--rgb-ground));
    --c-ground-2: #030712; /* fim do gradiente de seção */
    --c-ground-3: #111827; /* painel elevado */
    --c-surface: rgb(var(--rgb-ink) / 0.05);
    --c-surface-soft: rgb(var(--rgb-ink) / 0.02);
    --c-surface-softer: rgb(var(--rgb-ink) / 0.015);
    --c-surface-panel: rgb(var(--rgb-panel) / 0.5);
    --c-shell-from: #111827;
    --c-shell-to: #000000;
    --c-mockup-from: #1a1a1a;
    --c-mockup-to: #0a0a0a;
    --c-screen-bg: #0a0a0a;

    /* ----------------------------------------------------------------
       3. TEXTO — escala de ênfase, não de cinza.
       Os nomes descrevem hierarquia; a Fase 2 inverte os valores
       sem que nenhuma classe do HTML precise mudar.
       ---------------------------------------------------------------- */
    --c-text-strong: rgb(var(--rgb-ink)); /* títulos */
    --c-text-body: #d1d5db; /* corpo destacado */
    --c-text-muted: #9ca3af; /* corpo padrão */
    --c-text-faint: #6b7280; /* legendas */
    --c-text-fainter: #4b5563; /* rodapé, metadado */
    --c-text-inverse: #000000; /* texto sobre acento sólido */
    --c-on-accent: #ffffff; /* texto sobre chip saturado (WhatsApp, notificação):
                               permanece claro mesmo se a Fase 2 clarear o fundo */

    /* ----------------------------------------------------------------
       4. ACENTO E ESTADO
       ---------------------------------------------------------------- */
    --c-accent: rgb(var(--rgb-brand));
    --c-accent-strong: rgb(var(--rgb-brand-strong));
    --c-accent-deep: rgb(var(--rgb-brand-deep));
    --c-support: rgb(var(--rgb-support));
    --c-danger: rgb(var(--rgb-danger));
    --c-danger-text: #f87171; /* variante de perigo legível como TEXTO sobre o fundo */
    --c-success: rgb(var(--rgb-success));
    --c-info: rgb(var(--rgb-info));
    --c-alt: #c084fc;
    --c-warn: #f97316; /* fim do gradiente do contador de perda */
    --c-whats: rgb(var(--rgb-whats));

    /* Neutros de placeholder de case */
    --c-placeholder-bg: #0f172a;
    --c-placeholder-fg: #64748b;

    /* ----------------------------------------------------------------
       5. BORDAS
       ---------------------------------------------------------------- */
    --c-border-hair: rgb(var(--rgb-ink) / 0.1);
    --c-border-soft: rgb(var(--rgb-ink) / 0.2);
    --c-border-faint: rgb(var(--rgb-ink) / 0.08);
    --c-border-fainter: rgb(var(--rgb-ink) / 0.06);
    --c-border-accent: rgb(var(--rgb-brand) / 0.3);
    --c-border-danger: rgb(var(--rgb-danger) / 0.3);
    --c-border-default: var(--c-border-hair); /* usado por .border sem cor */

    /* ----------------------------------------------------------------
       6. TIPOGRAFIA
       ---------------------------------------------------------------- */
    --font-display: "Outfit", system-ui, sans-serif;
    --font-text: "Inter", system-ui, sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 3rem;
    --fs-6xl: 3.75rem;
    --fs-7xl: 4.5rem;
    --fs-8xl: 6rem;

    --lh-none: 1;
    --lh-tight: 1.25;
    --lh-snug: 1.5;
    --lh-relaxed: 1.625;

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --ls-tight: -0.025em;
    --ls-wide: 0.025em;
    --ls-widest: 0.1em;

    /* ----------------------------------------------------------------
       7. ESPAÇO — escala de 0,25rem, os degraus que o projeto usa
       ---------------------------------------------------------------- */
    --sp-half: 0.125rem;
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;
    --sp-36: 9rem;

    /* ----------------------------------------------------------------
       8. RAIO, SOMBRA, MOVIMENTO
       ---------------------------------------------------------------- */
    --r-sm: 0.25rem;
    --r-md: 0.5rem;
    --r-lg: 0.75rem;
    --r-xl: 1rem;
    --r-full: 9999px;

    --shadow-accent: 0 25px 50px -12px rgb(var(--rgb-brand) / 0.25),
      0 0 0 1px rgb(var(--rgb-brand) / 0.1);
    --shadow-accent-strong: 0 25px 50px -12px rgb(var(--rgb-brand) / 0.3),
      0 0 0 1px rgb(var(--rgb-brand) / 0.1);
    --shadow-dot: 0 0 20px rgb(var(--rgb-brand) / 0.25);
    --shadow-cta: 0 0 30px rgb(var(--rgb-brand) / 0.5);
    --shadow-cta-hi: 0 0 50px rgb(var(--rgb-brand) / 0.8);
    --shadow-whats: 0 4px 20px rgb(var(--rgb-whats) / 0.4);
    --shadow-whats-hi: 0 6px 30px rgb(var(--rgb-whats) / 0.6);
    --shadow-note: 0 4px 20px rgb(var(--rgb-brand) / 0.4);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 150ms;
    --dur-mid: 300ms;

    /* ----------------------------------------------------------------
       9. LAYOUT
       ---------------------------------------------------------------- */
    --w-2xl: 42rem;
    --w-3xl: 48rem;
    --w-4xl: 56rem;
    --w-5xl: 64rem;
    --w-6xl: 72rem;
    --w-7xl: 80rem;
    --w-md: 28rem;
  }

  /* ------------------------------------------------------------------
     FASE 2 — tema claro/saúde, escopado por atributo.
     Só home e /mercados/nutricionistas/ recebem <body data-theme="light">.
     tecnologia/industria não ganham o atributo, então continuam lendo
     os valores do :root acima — zero mudança visual para elas, porque
     os 3 arquivos de CSS são compartilhados pelas 4 páginas.

     Mesmos NOMES de variável do :root. Só o valor muda — nenhum
     seletor ou classe do HTML precisa saber que o tema trocou.
     Valores de cor recalculados na Fase 1 (ver docs/fase1-relatorio.md
     §10b/10c); a única divergência deste arquivo é a cor do WhatsApp,
     decidida abaixo.
     ------------------------------------------------------------------ */
  body[data-theme="light"] {
    /* 1. CANAIS RGB — a virada acontece aqui
       Fase 3 (10/2026): marca migrou de verde/terracota para azul, para ficar
       consistente com o tema escuro de /mercados/tecnologia/ e /industria/ —
       --rgb-brand-deep abaixo É literalmente o --rgb-brand-deep do tema
       escuro (37 99 235). Ver melhorias.md. */
    --rgb-ground: 250 249 246; /* #faf9f6 — off-white quente */
    --rgb-ink: 28 28 26; /* #1c1c1a — tinta escura */
    --rgb-brand: 37 99 235; /* #2563eb — mesmo azul do tema escuro (mercados) */
    --rgb-brand-strong: 29 78 216; /* #1d4ed8 — ênfase: mais escura no claro, 6,4:1 sobre o fundo */
    --rgb-brand-deep: 30 58 138; /* #1e3a8a — navy, fim do gradiente dos CTAs */
    --rgb-support: 14 165 233; /* #0ea5e9 — azul-céu, acento secundário */
    --rgb-danger: 163 58 43; /* #a33a2b */
    --rgb-success: 45 95 76; /* #2d5f4c — mantido verde: semântica de "incluído", distinta da marca */
    --rgb-info: 45 95 76; /* #2d5f4c — canal não usado por --c-info neste tema (ver literal abaixo) */
    --rgb-alt: 168 86 56; /* #a85638 — canal não usado por --c-alt neste tema (ver literal abaixo) */
    /* WhatsApp: mantida a cor real de marca (#25d366), diferente da
       proposta da 1.8 (que propunha escurecer para #128c42). A saída
       para o A5 (ícone branco sobre #25d366 dá 1.98:1) é a OUTRA opção
       que o próprio relatório da Fase 1 já dava como válida: manter o
       verde real e trocar o ícone para tinta escura. --c-on-whats abaixo
       resolve isso sem desviar da cor de marca do WhatsApp. */
    --rgb-whats: 37 211 102; /* #25d366 — inalterado */
    --rgb-panel: 242 240 234; /* #f2f0ea */

    /* 2. SUPERFÍCIES — invertem de papel */
    --c-ground: rgb(var(--rgb-ground));
    --c-ground-2: #f2f0ea;
    --c-ground-3: #ffffff;
    --c-surface: rgb(var(--rgb-ink) / 0.03);
    --c-surface-soft: rgb(var(--rgb-ink) / 0.02);
    --c-surface-softer: rgb(var(--rgb-ink) / 0.015);
    --c-surface-panel: rgb(var(--rgb-panel) / 1);
    --c-shell-from: #ffffff;
    --c-shell-to: #f2f0ea;
    --c-mockup-from: #ffffff;
    --c-mockup-to: #f2f0ea;
    --c-screen-bg: #f2f0ea;

    /* 3. TEXTO */
    --c-text-strong: #1c1c1a; /* 16,21:1 */
    --c-text-body: #3d3d39; /* 10,58:1 */
    --c-text-muted: #5a5a54; /*  6,59:1 */
    --c-text-faint: #6e6e66; /*  4,94:1 */
    --c-text-fainter: #6e6e66; /* 4,88:1 sobre --c-ground — recalculado na 2.x: a
      proposta da 1.8 (#77776e) media 4,29:1 aqui, abaixo do 4,5:1 exigido.
      axe-core confirmou a reprovação; este valor corrige com folga. */
    --c-text-inverse: #faf9f6;
    --c-on-accent: #ffffff;
    --c-on-whats: #1c1c1a; /* ícone/texto escuro sobre o verde real do WhatsApp: 10,6:1 — resolve o achado A5 */

    /* 4. ACENTO E ESTADO */
    --c-accent: rgb(var(--rgb-brand));
    --c-accent-strong: rgb(var(--rgb-brand-strong));
    --c-accent-deep: rgb(var(--rgb-brand-deep)); /* #1e3a8a — navy, fim do gradiente */
    --c-support: rgb(var(--rgb-support)); /* #0ea5e9 — azul-céu */
    --c-danger: #a33a2b;
    --c-danger-text: #8f3225;
    --c-success: #2d5f4c; /* verde mantido — "incluído" continua distinto da marca azul */
    --c-info: #0369a1; /* azul-petróleo — selo FINTECH, 5,6:1 sobre o fundo */
    --c-alt: #4338ca; /* índigo — selo GESTÃO ESPORTIVA, 7,5:1 sobre o fundo */
    --c-warn: #a85638; /* mantido — só alimenta o gradiente vermelho→terracota do contador de perda, não é um botão */
    --c-whats: rgb(var(--rgb-whats));
    --c-placeholder-bg: #f2f0ea;
    --c-placeholder-fg: #6e6e66;

    /* 5. BORDAS */
    --c-border-hair: #e3e0d8;
    --c-border-soft: rgb(var(--rgb-ink) / 0.2);
    --c-border-faint: rgb(var(--rgb-ink) / 0.08);
    --c-border-fainter: rgb(var(--rgb-ink) / 0.06);
    --c-border-accent: rgb(var(--rgb-brand) / 0.3);
    --c-border-danger: rgb(var(--rgb-danger) / 0.3);
    --c-border-default: var(--c-border-hair);

    /* 6. TIPOGRAFIA — Fraunces trocada por Outfit (Fase 3): a mesma fonte de
       título do tema escuro (mercados/tecnologia, /industria), mais sólida e
       menos "ondulada" para o título e a logo. Corpo continua mais respirado. */
    --font-display: "Outfit", system-ui, sans-serif;
    --lh-relaxed: 1.7;
    --ls-tight: -0.01em;

    /* 8. SOMBRA — halo colorido por profundidade neutra e suave.
       Literal exigido pelo plano (0 1px 3px / 0 8px 24px sobre tinta a
       6% e 4%); como --rgb-ink já É 28 28 26 neste tema, expressar via
       canal RGB mantém tudo dentro da arquitetura de tokens. */
    --shadow-elevation-sm: 0 1px 3px rgb(var(--rgb-ink) / 0.06),
      0 8px 24px rgb(var(--rgb-ink) / 0.04);
    --shadow-elevation-md: 0 2px 6px rgb(var(--rgb-ink) / 0.07),
      0 12px 32px rgb(var(--rgb-ink) / 0.05);
    --shadow-accent: var(--shadow-elevation-sm);
    --shadow-accent-strong: var(--shadow-elevation-md);
    --shadow-dot: none;
    --shadow-cta: var(--shadow-elevation-sm);
    --shadow-cta-hi: var(--shadow-elevation-sm);
    --shadow-whats: var(--shadow-elevation-sm);
    --shadow-whats-hi: var(--shadow-elevation-md);
    --shadow-note: var(--shadow-elevation-sm);
  }
}