/* NASH — tokens finais do design system, versão do site (nash.dmnzs.com).
   Uma fonte só para cor, grade, tipo, raio, vidro e movimento. Consolida,
   em 2026-09-08, o que a casa já tinha em três arquivos —
   src/renderer/style-guide.css (cor), src/renderer/grade.css (medida) e
   src/renderer/motion.css (vidro e tempo) — mais o que o site pediu e o
   app ainda não usa: os degraus de display, o accent Império preparado e
   as durações de cena. Os nomes são os mesmos do app, de propósito: o que
   se aprende aqui vale lá, e vice-versa. Documentação viva em
   /design-system. */

:root {
  color-scheme: dark;

  /* ---------- cor: o chão ----------
     O site é preto absoluto: o orbe de partículas vive sobre #000, como as
     páginas orb e Ateliê do app. --nash-color-bg-app é o chão da casca do app
     (#0a0a0f, o bg-base do style-guide.css), guardado para as peças que
     migram numa direção ou na outra; --nash-logo-backdrop é o fundo medido
     do PNG da marca (#111115). */
  --nash-color-bg-page: #000000;
  --nash-color-bg-app: #0a0a0f;
  --nash-logo-backdrop: #111115;

  /* ---------- cor: o branco em degraus ----------
     Um branco só, em nove alfas. Texto, borda, campo e placa saem daqui;
     nada declara um rgba(255,255,255) próprio. */
  --nash-color-text: #ffffff;
  --nash-palette-white-88: rgba(255, 255, 255, 0.88);
  --nash-palette-white-62: rgba(255, 255, 255, 0.62);
  --nash-palette-white-55: rgba(255, 255, 255, 0.55);
  --nash-palette-white-38: rgba(255, 255, 255, 0.38);
  --nash-palette-white-30: rgba(255, 255, 255, 0.3);
  --nash-palette-white-18: rgba(255, 255, 255, 0.18);
  --nash-palette-white-12: rgba(255, 255, 255, 0.12);
  --nash-palette-white-08: rgba(255, 255, 255, 0.08);
  --nash-palette-white-06: rgba(255, 255, 255, 0.06);
  --nash-palette-white-04: rgba(255, 255, 255, 0.04);

  /* ---------- cor: papéis ----------
     Os mesmos nomes de style-guide.css, agora apontando para os degraus. */
  --bg-base: var(--nash-color-bg-page);
  --text: #e8e8ea;
  --text-forte: var(--nash-color-text);
  --text-mid: var(--nash-palette-white-55);
  --text-weak: var(--nash-palette-white-30);
  --border: var(--nash-palette-white-18);
  --border-weak: var(--nash-palette-white-08);
  --field-bg: var(--nash-palette-white-06);
  --color-error: #ff8a8a;

  /* ---------- cor: o accent da marca ----------
     Um ponto de troca só. Branco hoje — neon branco sobre preto é a voz do
     site. O Império é o vermelho preparado para quando o dono decidir:
     forte, saturado, na pegada Darth Vader. Entra com data-accent="imperio"
     no <html>, e nada mais muda de lugar. Três degraus porque o glow pede
     uma ponta clara e a profundidade pede uma escura. */
  --nash-palette-crimson-1: #ff5c5c;
  --nash-palette-crimson: #ff1a1a;
  --nash-palette-crimson-2: #9e0000;
  --accent: var(--nash-color-text);
  --accent-1: var(--nash-color-text);
  --accent-2: var(--nash-palette-white-55);
  --accent-glow: rgba(255, 255, 255, 0.32);
  --accent-contraste: var(--nash-color-bg-page);

  /* ---------- cor: o sinal ----------
     O que está vivo agora, no app: o arco do botão principal, a aresta
     ativa. Âmbar por ora — decisão em aberto desde 2026-09-07 (ver
     motion.css). O site não usa o sinal: aqui o que está vivo é branco. */
  --nash-color-signal-1: #ffd08a;
  --nash-color-signal-mid: #ffb454;
  --nash-color-signal-2: #ff6b2c;

  /* ---------- cor: as abas ----------
     Identidade de cada aba do Nash Workspace, não da marca. O site as usa
     só como o ponto de cada peça. */
  --accent-chat: #4dc9ff;
  --accent-design: #b36bff;
  --accent-image: #ffb454;
  --accent-social: #5fe0a5;
  --accent-music: #1db954;
  --accent-youtube: #ff0000;
  --accent-git: #f0665a;
  --accent-screen: #94a3b8;
  --accent-sylas: #2dd4bf;

  /* ---------- a aura ----------
     As duas pontas da borda que corre quando uma superfície gera: roxo à
     esquerda, âmbar à direita — a receita da Gen UI. */
  --nash-color-activity-a: var(--accent-design);
  --nash-color-activity-b: var(--accent-image);

  /* ---------- tipo ----------
     Geist e Geist Mono, locais, variáveis de 100 a 900. São as famílias do
     site desde 2026-10-01, por decisão do dono ("unifica em geist"): a Nash
     Bit nasceu em Geist, e em vez de duas tipografias conviverem no mesmo
     domínio, o site passa a falar a letra dela. Toda superfície que não pede
     outra coisa fala nela, display e título inclusive, porque os papéis de
     tipo não declaram família própria.
     A Nash Geometric e a Nash Grotesk continuam declaradas em nash-base.css e
     alcançáveis pelo nome da família; cada uma ganha token no dia em que uma
     peça o ler, nomeado pelo trabalho dessa peça. A Archivo segue só na marca,
     até o dono fechar RD-93. Nenhuma página busca tipo na rede
     (regras-da-casa §1). */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --nash-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-mono: var(--nash-font-mono);

  /* Sete degraus do app (grade.md) e três de display que nasceram no site.
     Nada abaixo de 11px, nada entre os degraus. */
  --nash-type-size-1: 11px;
  --nash-type-size-2: 12px;
  --nash-type-size-3: 13px;
  --nash-type-size-4: 15px;
  --nash-type-size-5: 18px;
  --nash-type-size-6: 24px;
  --nash-type-size-7: 32px;
  --nash-type-size-8: 48px;
  --nash-type-size-9: 72px;
  --nash-type-size-10: 120px;

  --nash-type-leading-title: 1.25;
  --nash-type-leading-body: 1.6;
  --nash-type-leading-display: 0.96;
  --nash-type-tracking-tight: -0.015em;
  /* −3,2% dá à Nash Grotesk ExtraBold a mesma folga média entre letras que
     a Archivo 800 tinha a −4,5%; a −4,5% as palavras se colavam. */
  --nash-type-tracking-display: -0.032em;
  --nash-type-tracking-wide: 0.18em; /* rótulos em caixa alta, o "expandido" do slogan */

  /* ---------- espaço ----------
     Base 8. --nash-space-0 é meia-unidade, para ajuste ótico dentro de um
     controle, nunca para separar blocos. */
  --nash-space-0: 4px;
  --nash-space-1: 8px;
  --nash-space-2: 12px;
  --nash-space-3: 16px;
  --nash-space-4: 24px;
  --nash-space-5: 32px;
  --nash-space-6: 48px;
  --nash-space-7: 64px;
  --nash-space-8: 96px;
  --nash-space-9: 160px; /* respiro entre capítulos do site */

  /* ---------- a grade ---------- */
  --nash-grid-columns: 12;
  --nash-grid-gutter: 16px;
  --nash-grid-margin: 20px;
  --nash-grid-width: 1440px;
  --nash-measure-width: 720px;
  --nash-sidebar-width: 300px;

  /* ---------- raio ---------- */
  --nash-radius-1: 8px;
  --nash-radius-2: 12px;
  --nash-radius-3: 16px;
  --nash-radius-4: 20px;
  --nash-radius-5: 28px;
  --nash-radius-pill: 999px;

  /* ---------- alvo ---------- */
  --nash-target-dense: 32px;
  --nash-target-loose: 44px;

  /* ---------- o vidro ----------
     A placa: fill escuro a 32%, blur 28 com saturação 1,85, dois strokes
     de 1,5px por dentro (branco 15 > 6 > 2 > 0; accent 45 > 18 > 6 > 0,
     apagado até um estado pedir). É a aproximação em CSS do efeito GLASS
     do Figma (refração 0,8, profundidade 20, luz a −45°). */
  --nash-surface-blur: 28px;
  --nash-surface-saturation: 1.85;
  --nash-surface-fill: rgba(13, 15, 18, 0.32);
  --nash-surface-fill-hover: rgba(31, 33, 40, 0.4);
  --nash-surface-fill-pressed: rgba(8, 10, 13, 0.32);
  --nash-surface-fill-reading: rgba(13, 15, 18, 0.72); /* fill do que carrega corpo de texto sobre o orbe: a 32% a partícula derruba o branco a 55% abaixo de 3:1 */
  --nash-surface-stroke-width: 1.5px;

  /* ---------- o brilho ----------
     Neon branco, minimalista: um halo curto e um longo, sempre na cor do
     accent. O brilho nunca vem de uma sombra colorida solta. */
  --nash-shadow-glow-short: 0 0 10px 0 var(--accent-glow);
  --nash-shadow-glow-long: 0 0 40px 0 var(--accent-glow), 0 0 120px -20px var(--accent-glow);

  /* ---------- movimento: tempo ----------
     Os tokens de motion.css, mais três de cena que o site precisou. Cada
     duração segue a distância percorrida, não a importância. */
  --nash-motion-duration-press: 100ms;
  --nash-motion-duration-micro: 140ms;
  --nash-motion-duration-release: 160ms;
  --nash-motion-duration-state: 180ms;
  --nash-motion-duration-dot: 160ms;
  --nash-motion-duration-glow: 260ms;
  --nash-motion-duration-sweep: 640ms;
  --nash-motion-duration-flash: 300ms;
  --nash-motion-duration-complete: 700ms;
  --nash-motion-duration-expand: 300ms;
  --nash-motion-duration-letter: 32ms;
  --nash-motion-duration-open: 320ms;
  --nash-motion-duration-anchor: 560ms;
  --nash-motion-duration-arrive: 520ms;
  --nash-motion-duration-fade: 160ms;
  --nash-motion-duration-reveal: 800ms; /* um bloco de página entra na tela */
  --nash-motion-duration-scene: 1200ms; /* a abertura do herói, uma vez por visita */
  --nash-motion-duration-track: 1800ms; /* a música entra e sai por este tempo */
  --nash-motion-stagger-step: 90ms;
  --nash-motion-loop-arc: 5.5s;
  --nash-motion-loop-breathe: 4s;
  --nash-motion-loop-aura: 6s;
  --nash-motion-loop-ambient: 7s; /* qualquer laço ambiente respira neste período */
  /* --nash-switch-travel (24px, a viagem da bolinha do Toggle) saiu em 2026-09-29:
     é --nash-switch-travel, token da peça Switch (nash-switch.css). */

  /* ---------- movimento: curva ----------
     Uma curva por família. A de saída em tudo que chega ou volta; a
     espacial só no que percorre distância real (o abre, as revelações de
     página); linear nos laços. Nada tem overshoot. */
  --nash-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nash-motion-ease-spatial: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- o modo claro ----------
   Pedido dele em 2026-09-21: "faça um light mode de fácil acesso para o ws".

   O kit nasceu escuro, e a escada de contraste dele se chama `--nash-color-text`.
   No claro essa escada continua sendo a escada — o que muda é a tinta: os
   mesmos degraus de opacidade, agora de preto sobre papel. O NOME passa a
   mentir, e isso é dívida registrada, não descuido: renomear a escada pra
   algo neutro (`--nash-color-ink-*`) é decisão de vocabulário, e está no quadro.
   Enquanto não for tomada, redefinir a escada aqui é o único jeito de as 15
   telas virarem claras sem tocar em nenhuma delas — são 51 usos diretos de
   `var(--nash-color-text-NN)` espalhados por elas.

   O chão não é branco puro: um papel com viés quente, que é o lado do
   vermelho imperial. Branco puro contra o #ff1a1a vibra.

   O vidro inverte junto: no escuro a placa é fumaça sobre luz, no claro é
   luz sobre papel. O desfoque fica igual — é ele que faz o vidro. */
:root[data-tema='claro'] {
  color-scheme: light;

  /* O chão e a tinta trocam de lado. */
  --nash-color-bg-page: #f7f6f5;
  --nash-color-bg-app: #ffffff;
  --nash-logo-backdrop: #eceae8;

  /* A escada, nos mesmos degraus, agora em tinta. */
  --nash-color-text: #14140f;
  --nash-palette-white-88: rgba(20, 20, 15, 0.88);
  --nash-palette-white-62: rgba(20, 20, 15, 0.62);
  --nash-palette-white-55: rgba(20, 20, 15, 0.58);
  --nash-palette-white-38: rgba(20, 20, 15, 0.42);
  --nash-palette-white-30: rgba(20, 20, 15, 0.34);
  --nash-palette-white-18: rgba(20, 20, 15, 0.2);
  --nash-palette-white-12: rgba(20, 20, 15, 0.14);
  --nash-palette-white-08: rgba(20, 20, 15, 0.1);
  --nash-palette-white-06: rgba(20, 20, 15, 0.08);
  --nash-palette-white-04: rgba(20, 20, 15, 0.055);

  /* O vidro: luz sobre papel em vez de fumaça sobre luz. Mais opaco que no
     escuro, porque sobre papel um vidro fino vira mancha em vez de camada. */
  --nash-surface-fill: rgba(255, 255, 255, 0.66);
  --nash-surface-fill-hover: rgba(255, 255, 255, 0.82);
  --nash-surface-fill-pressed: rgba(236, 234, 232, 0.78);
  --nash-surface-fill-reading: rgba(255, 255, 255, 0.86);

  /* O imperial escurece um passo: o #ff1a1a puro sobre papel claro estoura a
     saturação e perde o contraste com o texto ao lado dele. */
  --nash-palette-crimson-1: #ff4040;
  --nash-palette-crimson: #d90000;
  --nash-palette-crimson-2: #7a0000;

  /* Os sinais âmbar escurecem pelo mesmo motivo. */
  --nash-color-signal-1: #b06d00;
  --nash-color-signal-mid: #c76b00;
  --nash-color-signal-2: #d0450d;

  --text: #14140f;
  --accent-contraste: #ffffff;
  --accent-glow: rgba(20, 20, 15, 0.22);
}

/* ---------- os cortes ----------
   Quatro, e só quatro: 640, 900, 1200, 1600. */
@media (min-width: 900px) {
  :root {
    --nash-grid-gutter: 20px;
    --nash-grid-margin: 32px;
  }
}

@media (min-width: 1200px) {
  :root {
    --nash-grid-gutter: 24px;
    --nash-grid-margin: 40px;
  }
}

/* ---------- o Império ----------
   A troca do accent. Um atributo no <html> e o site inteiro — strokes,
   pontos, halos, o arco — passa a ler vermelho. Preparado, não ligado. */
:root[data-accent='imperio'] {
  --accent: var(--nash-palette-crimson);
  --accent-1: var(--nash-palette-crimson-1);
  --accent-2: var(--nash-palette-crimson-2);
  --accent-glow: rgba(255, 26, 26, 0.45);
  --accent-contraste: var(--nash-color-text);
}