@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);

    --brand-300: oklch(78% 0.13 275);
    --brand-400: oklch(70% 0.16 275);
    --brand-500: oklch(62% 0.19 275);
    --brand-600: oklch(54% 0.19 275);
    --brand-700: oklch(46% 0.17 275);

    /* 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(20% 0.02 275 / 0.06);
    --shadow-md: 0 4px 12px oklch(20% 0.02 275 / 0.08),
                 0 1px 3px  oklch(20% 0.02 275 / 0.06);
    --shadow-lg: 0 12px 32px oklch(20% 0.02 275 / 0.12),
                 0 2px 8px   oklch(20% 0.02 275 / 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 o arco mais curto
       entre o violeta (275) e o cinza quente (60) passa pelo laranja — o
       cartão violeta 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 é --brand-500 nem --brand-600 fixo: violeta
       sobre fundo claro e violeta sobre fundo escuro pedem tons diferentes
       para o contraste passar de 4.5:1. */
    --brand-text:  light-dark(var(--brand-600), var(--brand-400));
  }

  @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;  }
}