/* 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-casca é 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-marca-fundo é o fundo medido do PNG da marca (#111115). */ --nash-preto: #000000; --nash-casca: #0a0a0f; --nash-marca-fundo: #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-branco: #ffffff; --nash-branco-88: rgba(255, 255, 255, 0.88); --nash-branco-62: rgba(255, 255, 255, 0.62); --nash-branco-55: rgba(255, 255, 255, 0.55); --nash-branco-38: rgba(255, 255, 255, 0.38); --nash-branco-30: rgba(255, 255, 255, 0.3); --nash-branco-18: rgba(255, 255, 255, 0.18); --nash-branco-12: rgba(255, 255, 255, 0.12); --nash-branco-08: rgba(255, 255, 255, 0.08); --nash-branco-06: rgba(255, 255, 255, 0.06); --nash-branco-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-preto); --text: #e8e8ea; --text-forte: var(--nash-branco); --text-mid: var(--nash-branco-55); --text-weak: var(--nash-branco-30); --border: var(--nash-branco-18); --border-weak: var(--nash-branco-08); --field-bg: var(--nash-branco-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 , e nada mais muda de lugar. Três degraus porque o glow pede uma ponta clara e a profundidade pede uma escura. */ --nash-imperio-1: #ff5c5c; --nash-imperio: #ff1a1a; --nash-imperio-2: #9e0000; --accent: var(--nash-branco); --accent-1: var(--nash-branco); --accent-2: var(--nash-branco-55); --accent-glow: rgba(255, 255, 255, 0.32); --accent-contraste: var(--nash-preto); /* ---------- 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-sinal-1: #ffd08a; --nash-sinal-med: #ffb454; --nash-sinal-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-aura-a: var(--accent-design); --nash-aura-b: var(--accent-image); /* ---------- tipo ---------- Archivo, local, variável de 100 a 900. Nenhuma página busca tipo na rede (regras-da-casa §1). */ --font-sans: 'Archivo', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Sete degraus do app (grade.md) e três de display que nasceram no site. Nada abaixo de 11px, nada entre os degraus. */ --nash-t1: 11px; --nash-t2: 12px; --nash-t3: 13px; --nash-t4: 15px; --nash-t5: 18px; --nash-t6: 24px; --nash-t7: 32px; --nash-t8: 48px; --nash-t9: 72px; --nash-t10: 120px; --nash-linha-titulo: 1.25; --nash-linha-corpo: 1.6; --nash-linha-display: 0.96; --nash-aperto: -0.015em; --nash-aperto-display: -0.045em; --nash-abertura: 0.18em; /* rótulos em caixa alta, o "expandido" do slogan */ /* ---------- espaço ---------- Base 8. --nash-e0 é meia-unidade, para ajuste ótico dentro de um controle, nunca para separar blocos. */ --nash-e0: 4px; --nash-e1: 8px; --nash-e2: 12px; --nash-e3: 16px; --nash-e4: 24px; --nash-e5: 32px; --nash-e6: 48px; --nash-e7: 64px; --nash-e8: 96px; --nash-e9: 160px; /* respiro entre capítulos do site */ /* ---------- a grade ---------- */ --nash-colunas: 12; --nash-goteira: 16px; --nash-margem: 20px; --nash-larg: 1440px; --nash-leitura: 720px; --nash-lado: 300px; /* ---------- raio ---------- */ --nash-r1: 8px; --nash-r2: 12px; --nash-r3: 16px; --nash-r4: 20px; --nash-r5: 28px; --nash-r-pill: 999px; /* ---------- alvo ---------- */ --nash-alvo: 32px; --nash-alvo-solto: 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-vidro-blur: 28px; --nash-vidro-sat: 1.85; --nash-placa: rgba(13, 15, 18, 0.32); --nash-placa-hover: rgba(31, 33, 40, 0.4); --nash-placa-pressed: rgba(8, 10, 13, 0.32); --nash-placa-texto: 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-stroke: 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-glow-curto: 0 0 10px 0 var(--accent-glow); --nash-glow-longo: 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-dur-pressao: 100ms; --nash-dur-micro: 140ms; --nash-dur-solta: 160ms; --nash-dur-estado: 180ms; --nash-dur-ponto: 160ms; --nash-dur-brilho: 260ms; --nash-dur-lampejo: 640ms; --nash-dur-clarao: 300ms; --nash-dur-concluido: 700ms; --nash-dur-expande: 300ms; --nash-dur-letra: 32ms; --nash-dur-abre: 320ms; --nash-dur-ancora: 560ms; --nash-dur-chega: 520ms; --nash-dur-some: 160ms; --nash-dur-revela: 800ms; /* um bloco de página entra na tela */ --nash-dur-cena: 1200ms; /* a abertura do herói, uma vez por visita */ --nash-dur-trilha: 1800ms; /* a música entra e sai por este tempo */ --nash-passo: 90ms; --nash-arco-volta: 5.5s; --nash-aura-respira: 4s; --nash-aura-volta: 6s; --nash-ambiente: 7s; /* qualquer laço ambiente respira neste período */ --nash-curso: 24px; /* ---------- 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-curva-saida: cubic-bezier(0.16, 1, 0.3, 1); --nash-curva-espacial: cubic-bezier(0.33, 1, 0.68, 1); } /* ---------- os cortes ---------- Quatro, e só quatro: 640, 900, 1200, 1600. */ @media (min-width: 900px) { :root { --nash-goteira: 20px; --nash-margem: 32px; } } @media (min-width: 1200px) { :root { --nash-goteira: 24px; --nash-margem: 40px; } } /* ---------- o Império ---------- A troca do accent. Um atributo no e o site inteiro — strokes, pontos, halos, o arco — passa a ler vermelho. Preparado, não ligado. */ :root[data-accent='imperio'] { --accent: var(--nash-imperio); --accent-1: var(--nash-imperio-1); --accent-2: var(--nash-imperio-2); --accent-glow: rgba(255, 26, 26, 0.45); --accent-contraste: var(--nash-branco); }