/* * Perfforma — Design Tokens (fonte canônica) * Importado de claude.ai/design ("Design System Perfforma") em 2026-06-27. * Paleta de verde revisada (2026-06-27) para a família dos logos da marca * (--brand #00C853 light / #39FF6A dark; escala g50..g900 dos logos). * * Cores, superfícies, sombras (light + dark) vieram DIRETO do gerador. * Tipografia/escala, espaçamento, raios e motion foram padronizados a partir * dos valores observados no bundle (ver README.md). Status soft/border no dark * são derivados (translúcidos sobre superfície escura). * * Fontes (Google Fonts): Sora (display) · Plus Jakarta Sans (body) · JetBrains Mono (mono). * Tema escuro: aplique data-theme="dark" no . */ :root { /* Marca — escala de verde (g50 → g900) */ --g50:#E8FBEF; --g100:#C6F5D6; --g200:#92EBB4; --g300:#4FDD86; --g400:#39FF6A; --g500:#00C853; --g600:#00833B; --g700:#006A30; --g800:#1B5E20; --g900:#103D17; /* Superfícies (light) */ --bg:#F6F8F6; --surface:#FFFFFF; --surface-2:#F1F4F1; --surface-3:#E9EDE9; --border:#E2E5E2; --border-strong:#CBD0CB; --text:#121412; --text-muted:#565B56; --text-subtle:#797F79; /* Marca / foco */ --brand:#00C853; --accent:#39FF6A; --ring:rgba(0,200,83,.40); /* primary CTA label ink — dark on --brand, never white (06-UAT V-MÉDIO) */ --btn-ink:#06220F; /* Sombras / elevação */ --s1:0 1px 2px rgba(6,6,6,.06); --s2:0 2px 8px rgba(6,6,6,.08); --s3:0 10px 28px rgba(6,6,6,.10); --s4:0 18px 50px rgba(6,6,6,.16); /* Status — success (verde-marca), warning (âmbar), danger (vermelho), info (teal) */ --success:#00833B; --success-strong:#006A30; --success-soft:#E8FBEF; --success-border:#92EBB4; --warning:#C77A0A; --warning-strong:#7A4A06; --warning-soft:#FDF1DD; --warning-border:#F3C677; --danger:#C8252C; --danger-strong:#7E1419; --danger-soft:#FCEBEC; --danger-border:#F0AEB1; --info:#0D7D8C; --info-strong:#0A4953; --info-soft:#E2F3F5; --info-border:#A4D8DF; /* Tipografia — famílias */ --font-display:'Sora', system-ui, -apple-system, sans-serif; --font-sans:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Tipografia — escala (padronizada) */ --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px; --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:36px; --text-5xl:48px; /* Espaçamento — base 4px (space-4 = 16px confirmado no gerador) */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; /* Raios (md=10px do gerador; cards usam 14px) */ --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px; --radius-2xl:20px; --radius-full:999px; /* Movimento (base=200ms do gerador) */ --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --ease:cubic-bezier(.2,.7,.2,1); } [data-theme="dark"] { /* Superfícies (dark) */ --bg:#0E120E; --surface:#161B16; --surface-2:#1E241E; --surface-3:#262E26; --border:#2C332C; --border-strong:#3C453C; --text:#EAEFEA; --text-muted:#9AA39A; --text-subtle:#7F887F; /* Marca / foco (dark usa o verde vibrante) */ --brand:#39FF6A; --ring:rgba(57,255,106,.42); /* primary CTA label ink — dark on --brand, never white (06-UAT V-MÉDIO) */ --btn-ink:#06220F; /* Sombras (dark) */ --s1:0 1px 2px rgba(0,0,0,.45); --s2:0 2px 10px rgba(0,0,0,.5); --s3:0 12px 30px rgba(0,0,0,.55); --s4:0 18px 50px rgba(0,0,0,.6); /* Status — bases mantidas; soft/border derivados p/ superfície escura */ --success-soft:rgba(0,131,59,.18); --success-border:rgba(0,131,59,.42); --warning-soft:rgba(199,122,10,.18); --warning-border:rgba(199,122,10,.42); --danger-soft:rgba(200,37,44,.18); --danger-border:rgba(200,37,44,.44); --info-soft:rgba(13,125,140,.18); --info-border:rgba(13,125,140,.42); }