/*
  DS v2 — tokens · camada BASE
  Estrutura, neutros, forma, tipo e tema dark/light (F1.2b, dividido no F16.1).

  Esta camada é NEUTRA e válida sozinha: nenhuma cor, família ou gradiente de
  marca mora aqui. Um dashboard que carregue só este arquivo abre profissional,
  monocromático e com contraste AA — só não tem assinatura.

  A identidade vem de `tokens.brand.css`, carregado DEPOIS e sobrescrevendo os
  slots marcados abaixo. É o único arquivo que muda por marca.

  Primitives = âncoras (estáveis).
  Semantic --ds-* = o que superfícies consomem; mudam por tema.
  Contraste AA (≥4.5:1) verificado: scripts/_contrast_check.py
*/

:root {
  /* ═══════════════════════════════════════════════
     Layer 1 · primitives (shared)
     ═══════════════════════════════════════════════ */

  --primitive-white: #ffffff;
  --primitive-light-grey: #cccdd1;
  --primitive-grey: #8e9094;
  --primitive-black: #1a1a1c;
  --primitive-midnight: #141414;

  /* Neutros · Zinc — rampa canônica listável */
  --primitive-zinc-50: #fafafa;
  --primitive-zinc-100: #f4f4f5;
  --primitive-zinc-200: #e4e4e7;
  --primitive-zinc-300: #d4d4d8;
  --primitive-zinc-400: #a1a1aa;
  --primitive-zinc-500: #71717a;
  --primitive-zinc-600: #52525b;
  --primitive-zinc-700: #3f3f46;
  --primitive-zinc-800: #27272a;
  --primitive-zinc-900: #18181b;
  --primitive-zinc-950: #09090b;

  /* Aliases legados (mesma rampa zinc) */
  --primitive-neutral-50: var(--primitive-zinc-50);
  --primitive-neutral-100: var(--primitive-zinc-100);
  --primitive-neutral-200: var(--primitive-zinc-200);
  --primitive-neutral-300: var(--primitive-zinc-300);
  --primitive-neutral-400: var(--primitive-zinc-400);
  --primitive-neutral-500: var(--primitive-zinc-500);
  --primitive-neutral-600: var(--primitive-zinc-600);
  --primitive-neutral-700: var(--primitive-zinc-700);
  --primitive-neutral-800: var(--primitive-zinc-800);
  --primitive-neutral-900: var(--primitive-zinc-900);
  --primitive-neutral-950: var(--primitive-zinc-950);

  /* Status — semântica de UI, não identidade. Toda marca precisa dos três, e
     nenhuma marca quer que "erro" seja a cor dela.

     Valores de vendor neutro (escala Radix), escolhidos DE PROPÓSITO para não
     coincidir com a assinatura de nenhuma marca: a primeira versão desta camada
     reaproveitava o vermelho e o verde da Caiotti como status, e o hex do
     estúdio reaparecia no workspace de todo cliente por uma porta lateral.
     Marca que quiser status na cor dela sobrescreve em tokens.brand.css. */
  --primitive-status-danger: #e5484d;
  --primitive-status-ok: #30a46c;
  --primitive-status-danger-on-light: #cd2b31;
  --primitive-status-ok-on-light: #18794e;
  --primitive-status-warn-on-light: #ad5700;
  --primitive-status-danger-on-dark: #ff6369;
  --primitive-status-ok-on-dark: #4cc38a;
  --primitive-status-warn-on-dark: #f1a10d;

  /* ═══════════════════════════════════════════════
     Layer 2 · semantic — DARK (default)
     AA: text0/1/2 vs bg0/1/2 ≥ 4.5:1
     ═══════════════════════════════════════════════ */
  color-scheme: dark;

  --ds-bg-0: #0a0a0b;
  --ds-bg-1: #141414;
  --ds-bg-2: #1c1c1f;
  --ds-bg-hover: #2a2a2e;
  --ds-bg-inverse: #ffffff;
  --ds-bg-sunken: #050506;

  --ds-text-0: #fafafa;       /* 18.96:1 on bg-0 */
  --ds-text-1: #c4c4cc;       /* 11.42:1 on bg-0 */
  --ds-text-2: #a1a1aa;       /* 7.72:1 on bg-0 */
  --ds-text-inverse: #141414;

  --ds-border-subtle: color-mix(in srgb, #ffffff 9%, transparent);
  --ds-border-default: color-mix(in srgb, #ffffff 14%, transparent);
  --ds-border-emphasis: color-mix(in srgb, #ffffff 28%, transparent);

  /* Accent neutro por default. Marca com cor primária sobrescreve em
     tokens.brand.css; marca que ainda não tem cor fica assim, e está certo. */
  --ds-accent: #ffffff;
  --ds-accent-contrast: #141414;
  --ds-accent-muted: #a1a1aa;

  --ds-ok: var(--primitive-status-ok-on-dark);
  --ds-warn: var(--primitive-status-warn-on-dark);
  --ds-danger: var(--primitive-status-danger-on-dark);

  /* ── Slots de ASSINATURA — neutros aqui, marca sobrescreve ──────────────
     São os três canais do efeito glass e os gradientes. Sem camada de marca
     o efeito fica monocromático: discreto e profissional, nunca a cor de
     outra empresa. */
  --ds-signal-red: #c4c4cc;
  --ds-signal-green: #a1a1aa;
  /* #71717a dava 4.09:1 sobre bg-0 dark — reprovava AA no neutro que a base
     promete como AA. #82828b fecha em 5.2:1 mantendo a rampa zinc. */
  --ds-signal-blue: #82828b;

  --ds-brand-red: #a1a1aa;
  --ds-brand-green: #c4c4cc;
  --ds-brand-blue: #71717a;

  --ds-gradient-rgb: linear-gradient(120deg, #c4c4cc 0%, #a1a1aa 50%, #71717a 100%);
  --ds-gradient-brand: var(--ds-gradient-rgb);
  --ds-gradient-spectrum: conic-gradient(
    from 210deg,
    #c4c4cc 0deg,
    #a1a1aa 120deg,
    #71717a 240deg,
    #c4c4cc 360deg
  );

  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --ds-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

  --ds-focus-ring: color-mix(in srgb, #ffffff 45%, transparent);

  /* ═══════════════════════════════════════════════
     Forma
     ═══════════════════════════════════════════════ */
  /* Piso neutro da escala. A marca sobrescreve sm/md/lg/xl em tokens.brand.css
     (Organic Futurism = 4/8/14/20) — quem le tem que carregar OS DOIS arquivos,
     senao ve a escada errada. Foi exatamente esse o bug do token-audit e do
     tokenize_css ate 2026-08-12: sugeriam 12px pra --ds-radius-lg, que em
     runtime vale 14px.
     `2xl` foi removido: valia 20px, identico ao `xl` da marca, e o DESIGN.md
     nunca documentou 5 degraus. Dois nomes pro mesmo pixel viram drift. */
  --ds-radius-none: 0;
  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-full: 9999px;

  /* Espessura de traco. Nomeada porque `1px` aparecia 128 vezes so no
     dashboard.css — 15% de toda a divida de dimensao era hairline de borda. */
  --ds-border-width: 1px;
  --ds-border-width-thick: 2px;

  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;
  --ds-space-9: 48px;
  --ds-space-10: 64px;
  --ds-space-11: 80px;
  --ds-space-12: 96px;

  --ds-space-inset-xs: var(--ds-space-2);
  --ds-space-inset-sm: var(--ds-space-3);
  --ds-space-inset-md: var(--ds-space-4);
  --ds-space-inset-lg: var(--ds-space-6);
  --ds-space-stack-xs: var(--ds-space-1);
  --ds-space-stack-sm: var(--ds-space-2);
  --ds-space-stack-md: var(--ds-space-4);
  --ds-space-stack-lg: var(--ds-space-6);
  --ds-space-stack-xl: var(--ds-space-9);
  --ds-space-gap-sm: var(--ds-space-2);
  --ds-space-gap-md: var(--ds-space-3);
  --ds-space-gap-lg: var(--ds-space-4);
  --ds-space-page: var(--ds-space-6);
  --ds-space-section: var(--ds-space-9);

  /* ═══════════════════════════════════════════════
     Tipo
     FAMÍLIAS vêm da marca (`--primitive-font-*`).
     body = leitura · ui = chrome denso · display · mono
     Escala legível (root 16px no dashboard):
       xs 13 · sm 14 · md 16 body · lg 18 · xl 22 · 2xl 28 · 3xl 36
     ═══════════════════════════════════════════════ */
  --ds-font-body: var(--primitive-font-body, var(--primitive-font-ui, ui-sans-serif, system-ui, sans-serif));
  --ds-font-ui: var(--primitive-font-ui, ui-sans-serif, system-ui, sans-serif);
  --ds-font-display: var(--primitive-font-display, ui-sans-serif, system-ui, sans-serif);
  --ds-font-display-condensed: var(--primitive-font-display-condensed, ui-sans-serif, system-ui, sans-serif);
  --ds-font-mono: var(--primitive-font-mono, ui-monospace, "SF Mono", Consolas, monospace);

  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-weight-extrabold: 800;

  --ds-track-display: -0.03em;
  --ds-track-tight: -0.02em;
  --ds-track-normal: 0;
  --ds-track-wide: 0.04em;
  --ds-track-upper: 0.06em;

  --ds-leading-none: 1;
  --ds-leading-tight: 1.15;
  --ds-leading-snug: 1.4;
  --ds-leading-body: 1.6;
  --ds-leading-loose: 1.75;

  /* @ 16px root: 12 / 13 / 14 / 16 / 18 / 22 / 28 / 36
     2xs (12px) = PISO DE DENSIDADE, e o degrau mais baixo que existe.
     Nasceu em 2026-08-12 porque dashboard e mesa de operacao sao tabela de
     numero e o piso anterior (xs, 13px) nao cobria o caso real — escala que nao
     cobre a realidade nao e' respeitada, e' contornada.
     Nasceu junto um `3xs` (11px) que foi REMOVIDO no mesmo dia, na revisao
     externa: a evidencia mostrou que a escala tinha crescido pra encontrar o
     drift e o drift continuava abaixo dela (22 `text-[10px]` no Mission Control
     DEPOIS da adocao). Batizar 11px autorizava a proxima superficie a descer
     pra 10. **Abaixo de 12px nao existe degrau — sobe.**
     REGRA: 2xs so em meta, label de tabela, eyebrow e chip. Nunca em corpo de
     texto, nunca em botao. Corpo comeca no md. */
  --ds-text-2xs: 0.75rem;
  --ds-text-xs: 0.8125rem;
  --ds-text-sm: 0.875rem;
  --ds-text-md: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.375rem;
  --ds-text-2xl: 1.75rem;
  --ds-text-3xl: 2.25rem;
  --ds-text-display: clamp(2.75rem, 6vw, 4.5rem);

  --ds-type-body: var(--ds-weight-regular) var(--ds-text-md)/var(--ds-leading-body) var(--ds-font-body);
  --ds-type-body-medium: var(--ds-weight-medium) var(--ds-text-md)/var(--ds-leading-body) var(--ds-font-body);
  --ds-type-label: var(--ds-weight-medium) var(--ds-text-sm)/var(--ds-leading-snug) var(--ds-font-ui);
  --ds-type-caption: var(--ds-weight-regular) var(--ds-text-xs)/var(--ds-leading-snug) var(--ds-font-body);
  --ds-type-mono: var(--ds-weight-regular) var(--ds-text-sm)/var(--ds-leading-snug) var(--ds-font-mono);
  --ds-type-display: var(--ds-weight-regular) var(--ds-text-display)/var(--ds-leading-none) var(--ds-font-display);
  --ds-type-eyebrow: var(--ds-weight-bold) var(--ds-text-xs)/var(--ds-leading-snug) var(--ds-font-mono);

  --ds-icon-size-sm: 15px;
  --ds-icon-size-md: 16px;
  --ds-icon-size-lg: 22px;
  --ds-icon-size-xl: 24px;
  --ds-icon-stroke: 1.5;

  /* UI feedback — hover, foco, troca de painel. O bloco chroma abaixo é do efeito
     de marca, não serve pra interface. */
  --ds-motion-fast: 0.15s;
  --ds-motion-base: 0.25s;

  --ds-motion-chroma-duration: 2.8s;
  --ds-motion-chroma-ease: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ds-motion-chroma-spin: 5.5s;
}

/* ═══════════════════════════════════════════════
   LIGHT theme — Linear/Apple paper
   AA verified vs #fff / #f7f7f8 / #ececee
   ═══════════════════════════════════════════════ */
html[data-theme="light"],
:root[data-theme="light"],
html.theme-light,
:root.theme-light {
  color-scheme: light;

  --ds-bg-0: #f7f7f8;
  --ds-bg-1: #ffffff;
  --ds-bg-2: #ececee;
  --ds-bg-hover: #e4e4e7;
  --ds-bg-inverse: #141414;
  --ds-bg-sunken: #eef0f2;

  --ds-text-0: #141414;       /* 17.21:1 on bg-0 */
  --ds-text-1: #3f3f46;       /* 9.75:1 */
  --ds-text-2: #52525b;       /* 7.22:1 */
  --ds-text-inverse: #fafafa;

  --ds-border-subtle: color-mix(in srgb, #141414 8%, transparent);
  --ds-border-default: color-mix(in srgb, #141414 12%, transparent);
  --ds-border-emphasis: color-mix(in srgb, #141414 22%, transparent);

  --ds-accent: #141414;
  --ds-accent-contrast: #fafafa;
  --ds-accent-muted: #52525b;

  --ds-ok: var(--primitive-status-ok-on-light);
  --ds-warn: var(--primitive-status-warn-on-light);
  --ds-danger: var(--primitive-status-danger-on-light);

  --ds-signal-red: #52525b;
  --ds-signal-green: #3f3f46;
  --ds-signal-blue: #71717a;

  --ds-shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
  --ds-shadow-md: 0 8px 24px rgba(20, 20, 20, 0.08);
  --ds-shadow-lg: 0 24px 64px rgba(20, 20, 20, 0.12);

  --ds-focus-ring: color-mix(in srgb, #141414 35%, transparent);
}

/* Optional: follow OS preference when no explicit theme */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;

    --ds-bg-0: #f7f7f8;
    --ds-bg-1: #ffffff;
    --ds-bg-2: #ececee;
    --ds-bg-hover: #e4e4e7;
    --ds-bg-inverse: #141414;
    --ds-bg-sunken: #eef0f2;

    --ds-text-0: #141414;
    --ds-text-1: #3f3f46;
    --ds-text-2: #52525b;
    --ds-text-inverse: #fafafa;

    --ds-border-subtle: color-mix(in srgb, #141414 8%, transparent);
    --ds-border-default: color-mix(in srgb, #141414 12%, transparent);
    --ds-border-emphasis: color-mix(in srgb, #141414 22%, transparent);

    --ds-accent: #141414;
    --ds-accent-contrast: #fafafa;
    --ds-accent-muted: #52525b;

    --ds-ok: var(--primitive-status-ok-on-light);
    --ds-warn: var(--primitive-status-warn-on-light);
    --ds-danger: var(--primitive-status-danger-on-light);

    --ds-signal-red: #52525b;
    --ds-signal-green: #3f3f46;
    --ds-signal-blue: #71717a;

    --ds-shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
    --ds-shadow-md: 0 8px 24px rgba(20, 20, 20, 0.08);
    --ds-shadow-lg: 0 24px 64px rgba(20, 20, 20, 0.12);

    --ds-focus-ring: color-mix(in srgb, #141414 35%, transparent);
  }
}