/* Tokens do design system — cópia de src/styles/globals.css.
   Único lugar do mockup onde cor/raio/fonte são declarados. */
/* ===== Design tokens — light (globals.css :root) ===== */
:root {
  --radius: 0.45rem;

  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);

  /* azul deep #0445DC — única customização de marca */
  --primary: oklch(0.472 0.235 263.2);
  --primary-foreground: oklch(1 0 0);
  /* sky #4F8AEC — companheiro claro; massa do símbolo sobre superfície escura */
  --brand-fill: oklch(0.64 0.16 260);
  --brand-mark: var(--primary);

  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --success: oklch(0.56 0.13 150);
  --warning: oklch(0.6 0.14 60);
  --info: oklch(0.56 0.13 235);

  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.472 0.235 263.2);

  /* Dashboard (telas 11/12) — tokens extras do globals.css usados pelo shell:
     *-strong é a tinta de TEXTO do Delta e das badges de status (os tokens base
     falham AA sobre a própria tinta a 10%); brand-stroke é a caneta de sparkline;
     sidebar é o chrome branco puro destacando do canvas bg-muted. */
  --success-strong: oklch(0.44 0.13 150);
  --destructive-strong: oklch(0.48 0.22 27);
  /* tinta de texto do estado "Em andamento" (badge info) — valor verbatim de
     globals.css (--info-strong, 6.72:1 sólido / 5.90:1 sobre bg-info/10) */
  --info-strong: oklch(0.46 0.13 235);
  --brand-stroke: var(--primary);
  --sidebar: oklch(1 0 0);
  --sidebar-border: oklch(0.922 0 0);

  /* Rampa de série do gráfico (globals.css light): chart-1 = a mesma tinta do
     --primary (a marca no gráfico usa --brand-stroke); 2..3 = rampa no hue da
     marca, 4..5 = cauda neutra. FILL/STROKE apenas — nunca tipografia. */
  --chart-1: oklch(0.472 0.235 263.2);
  --chart-2: oklch(0.575 0.19 263.2);
  --chart-3: oklch(0.686 0.134 263.2);
  --chart-4: oklch(0.729 0 0);
  --chart-5: oklch(0.787 0 0);

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);

  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  /* Exclusiva do wordmark da marca — não usar em mais nada (regra do app). */
  --font-baloo: 'Baloo 2', system-ui, sans-serif;

  color-scheme: light;
}

/* ===== Escopo escuro — a banda decorativa da direita e o palco da tela de
   sucesso (só o FUNDO dela; o card central fica fora, em :root light) =====
   Não é dark mode: é superfície escura deliberada dentro de uma tela light.
   Os valores vêm do bloco .dark de globals.css, sem invenção. */
.band,
.success-stage-bg {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --border: oklch(1 0 0 / 10%);
  --brand-mark: var(--brand-fill);   /* massa do símbolo no escuro = sky */
  --ring: var(--brand-fill);

  /* Cores do DotGrid — lidas pelo canvas via getComputedStyle (nada de hex em JS).
     base: neutro escuro, visível mas discreto sobre a banda.
     ativa: o sky da marca (--brand-fill), o pico da interpolação de proximidade. */
  --dot-base: oklch(0.39 0 0);
  --dot-active: oklch(0.64 0.16 260);
}