/* Os tokens da skin Win32, nomeados pelo papel que cumprem e nunca pela cor que carregam.
   Um `--gray-200` obrigaria a reescrever o nome no modo escuro, onde ele deixa de ser 200. */

/* why: os valores não foram escolhidos, foram medidos. O head desktop os deriva em runtime de
   `SystemColors` por `ColorBlend.Toward`, e a medição de 2026-08-10 fixou o resultado das duas
   pontas. Copiá-los é o que faz as duas apresentações mostrarem a mesma tela; recalcular no
   navegador seria derivar de um `SystemColors` que a plataforma web não expõe. */
/* why: **três degraus, e o cartão é sempre o mais claro no tema claro.** A primeira versão tinha
   `--chrome` mais escuro que `--surface` e pintava o cartão com `--chrome` sobre uma página em
   `--surface` — elevação invertida, cartão mais escuro que a mesa em que ele está. No claro isso
   virou o cinza e o branco colidindo e a tela lendo como uma coisa só; no escuro era a "escuridão
   flutuante" que `ui-ux.md` nomeia. A pilha agora é `backdrop` < `chrome` < `surface` nos dois
   temas: a mesa embaixo, o cromo do shell no meio, o dado por cima. */
:root {
  color-scheme: light;

  /* why: a mesa atrás do conteúdo, e o Win32 já tinha nome para ela — `AppWorkspace`, o cinza da
     área MDI onde as janelas filhas ficam. Ela é o degrau mais escuro do tema claro de propósito:
     é o que faz a grade e o cartão lerem como objeto pousado, e não como continuação do fundo. */
  --backdrop: #e4e4e4;

  --surface: #fbfbfb;
  --surface-band: #f4f4f4;
  --surface-sunken: #e8e8e8;

  --chrome: #efefef;
  --chrome-header: #dcdcdc;

  --bevel-light: #fdfdfd;
  --bevel-shadow: #a0a0a0;
  --bevel-shadow-deep: #696969;
  --border: #c8c8c8;

  --text: #1f1f1f;
  --text-muted: #6b6b6b;
  --text-disabled: #9a9a9a;

  --selection: #d1e7f7;
  --accent: #0078d4;
  --accent-contrast: #fbfbfb;
}

/* why: **o escuro só chega por escolha, e `prefers-color-scheme` não é consultado em lugar nenhum.**
   A primeira versão trazia o bloco de tema numa media query, e quem abria o demo num sistema escuro
   caía no escuro sem ter pedido. O padrão de um showcase é a tela que ele quer mostrar; o operador
   troca no chip quando quiser, e a escolha fica gravada. Como a media query também pintava antes de
   o wasm subir, tirá-la mata de brinde o piscar de escuro que precedia o carimbo do atributo. */
:root[data-color-mode='dark'] {
  color-scheme: dark;

  --backdrop: #191919;

  --surface: #313131;
  --surface-band: #2e2e2e;
  --surface-sunken: #272727;

  --chrome: #252525;
  --chrome-header: #363636;

  --bevel-light: #3c3c3c;
  --bevel-shadow: #141414;
  --bevel-shadow-deep: #0d0d0d;
  --border: #454545;

  --text: #e6e6e6;
  --text-muted: #a0a0a0;
  --text-disabled: #6e6e6e;

  --selection: #293f4f;
  --accent: #4ca0e0;
  --accent-contrast: #1a1a1a;
}

/* why: as três matizes do farol de situação são exceção consciente à regra de derivar cor, e
   estão fora dos blocos de tema de propósito. Um estado precisa de significado que o tema não
   repinte, e foram medidas contra as quatro faixas de grade dos dois temas em 2026-08-10. */
:root {
  --status-settled: #22c55e;
  --status-open: #f59e0b;
  --status-overdue: #ef4444;
}

/* why: as cinco matizes de série são a segunda exceção, e pelo mesmo motivo: uma série precisa de
   identidade fixa. Saindo do tema, a barra mudaria de significado a cada troca de modo de cor e
   duas séries acabariam com a mesma cor. O que a regra protege — nada de cinza codificado
   sobrevivendo ao modo escuro — continua valendo, porque nenhuma delas é superfície: elas pintam
   marca sobre um fundo que o tema é quem define.
   why: são as mesmas cinco de `DashboardPalette` no head desktop, na mesma ordem. É o que faz o
   painel do legado e o do navegador lerem como o mesmo produto. */
:root {
  --series-blue: #3882f6;
  --series-green: #34d399;
  --series-purple: #a855f7;
  --series-amber: #fbbf24;
  --series-red: #ef4444;
}

/* why: a escala de espaço é Win32, não a L1-L4 do design system web. Uma grade que mostra seis
   linhas em vez de vinte deixa de ser tela de trabalho, e `p-8` entre irmãos faria exatamente
   isso. Os degraus dobram, o que mantém o ritmo sem inventar valor intermediário. */
:root {
  --space-hairline: 2px;
  --space-tight: 4px;
  --space-snug: 8px;
  --space-loose: 16px;
  --space-section: 24px;

  --chrome-height: 26px;
  --row-height: 24px;
  --sidebar-width: 208px;
  --reading-width: 900px;

  --font-ui: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-code: 'Cascadia Mono', 'Consolas', monospace;

  /* why: `rem` e não `px`. O Win32 nasce em Segoe UI 9pt, que dá 12px, e o head desktop precisou
     de três tamanhos de texto num menu porque o WinForms não tem zoom. O navegador tem, e um
     valor relativo ainda responde à fonte padrão que a pessoa configurou no browser — coisa que
     `12px` ignora. 0.8125rem dá os 13px que `context.md` chama de "padrão confortável que o
     operador pode subir", um degrau acima do Win32 literal, e é a fidelidade cedendo à leitura
     onde a decisão de 2026-08-10 manda ela ceder. */
  --font-size-ui: 0.8125rem;
  --font-size-small: 0.75rem;
  --line-height-ui: 1.45;
}