@layer tokens {
  :root {
    color-scheme: light dark;

    /* base neutra levemente quente */
    --gray-0:   oklch(99%  0.002 60);
    --gray-50:  oklch(97%  0.003 60);
    --gray-100: oklch(94%  0.004 60);
    --gray-200: oklch(89%  0.005 60);
    --gray-300: oklch(81%  0.006 60);
    --gray-400: oklch(68%  0.008 60);
    --gray-500: oklch(56%  0.009 60);
    --gray-600: oklch(45%  0.010 60);
    --gray-700: oklch(35%  0.010 60);
    --gray-800: oklch(26%  0.009 60);
    --gray-900: oklch(19%  0.008 60);
    --gray-950: oklch(14%  0.007 60);

    /* Azul-petróleo desde 05/10/2026 (decisão do Anderson; sem roxo/violeta
       e sem laranja/coral). 500 ≈ #0B6F71: botão e texto (5,9:1 com branco).
       400 ≈ #0F8B8D: a marca em área grande e ícone (4,1:1, não é texto).
       300 ≈ #5CC8C6: a marca sobre fundo escuro. Contrastes em docs/09. */
    --brand-300: oklch(77% 0.099 194);
    --brand-400: oklch(58% 0.096 197);
    --brand-500: oklch(49.2% 0.081 197);
    --brand-600: oklch(43% 0.071 197);
    --brand-700: oklch(37% 0.061 197);

    /* semânticas de aprendizado — NÃO são success/error de sistema */
    --win-500:     oklch(68% 0.15 155);
    --focus-500:   oklch(75% 0.14  75);
    --insight-500: oklch(70% 0.13 220);
    --danger-500:  oklch(60% 0.20  25);

    --bg:            light-dark(var(--gray-50),  var(--gray-950));
    --bg-elevated:   light-dark(var(--gray-0),   var(--gray-900));
    --bg-sunken:     light-dark(var(--gray-100), oklch(11% 0.006 60));
    --surface-hover: light-dark(var(--gray-100), var(--gray-800));

    --text:       light-dark(var(--gray-900), var(--gray-100));
    --text-muted: light-dark(var(--gray-600), var(--gray-400));
    --text-subtle:light-dark(var(--gray-500), var(--gray-500));
    --text-on-brand: var(--gray-0);

    --border:        light-dark(var(--gray-200), var(--gray-800));
    --border-strong: light-dark(var(--gray-300), var(--gray-700));

    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

    --text-xs: 0.75rem;  --text-sm: 0.875rem;  --text-base: 1rem;
    --text-lg: 1.125rem; --text-xl: 1.375rem;  --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    --leading-tight: 1.2; --leading-normal: 1.55; --leading-relaxed: 1.7;

    --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
    --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
    --space-7: 3rem;    --space-8: 4rem;

    --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 16px;
    --radius-xl: 24px; --radius-full: 999px;

    --shadow-sm: 0 1px 2px oklch(22% 0.015 250 / 0.06);
    --shadow-md: 0 4px 12px oklch(22% 0.015 250 / 0.08),
                 0 1px 3px  oklch(22% 0.015 250 / 0.06);
    --shadow-lg: 0 12px 32px oklch(22% 0.015 250 / 0.12),
                 0 2px 8px   oklch(22% 0.015 250 / 0.08);

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms;
    --dur-swap: 180ms;

    --container-chat: 46rem;
    --container-wide: 68rem;

    /* ── Tintas e realces da marca ─────────────────────────────────────
       O mesmo color-mix() escrito em cada regra viraria dez lugares para
       esquecer de ajustar quando o tom mudasse. O tom mora aqui, uma vez.

       Sempre com `transparent`, nunca com uma cor de fundo: misturar em
       oklch interpola o MATIZ pelo arco mais curto, e com o violeta de antes
       (275) e o cinza quente (60) esse arco passava pelo laranja — o cartão
       saía marrom. Com alfa, o matiz da marca fica intacto e quem compõe é
       o fundo. */
    --brand-soft:  light-dark(color-mix(in oklch, var(--brand-500) 10%, transparent),
                              color-mix(in oklch, var(--brand-500) 17%, transparent));
    --brand-tint:  light-dark(color-mix(in oklch, var(--brand-500) 15%, transparent),
                              color-mix(in oklch, var(--brand-500) 24%, transparent));
    --brand-line:  light-dark(color-mix(in oklch, var(--brand-500) 34%, transparent),
                              color-mix(in oklch, var(--brand-500) 46%, transparent));

    /* Halo de fundo no alto da tela. É o que dá profundidade ao vazio: o
       fundo deixa de ser uma parede chapada e passa a ter luz. */
    --aura:        light-dark(color-mix(in oklch, var(--brand-500)  8%, transparent),
                              color-mix(in oklch, var(--brand-500) 14%, transparent));

    /* Fio de luz de 1px no topo das superfícies. No escuro, borda mais clara
       deixa o cartão "aceso"; isto dá o mesmo relevo sem lavar a borda. */
    --edge:        light-dark(oklch(100% 0 0 / 0), oklch(100% 0 0 / 0.05));

    --selection:   light-dark(color-mix(in oklch, var(--brand-500) 24%, transparent),
                              color-mix(in oklch, var(--brand-500) 34%, transparent));

    /* Texto na cor da marca. Não é um tom fixo: a marca sobre fundo claro e
       sobre fundo escuro pede tons diferentes para passar de 4,5:1 — o 500
       no claro (5,5:1) e o 300 no escuro (10:1); o 500 no escuro daria 3,4:1. */
    --brand-text:  light-dark(var(--brand-500), var(--brand-300));
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark;  }
}