/* ============================================================================= ERICKSON CORP — DESIGN TOKENS Fonte única da verdade. CSS custom properties, dark-first, theme-aware. ----------------------------------------------------------------------------- Uso: (padrão / assinatura) (primeira-classe, AA) Sem data-theme, segue prefers-color-scheme (ver bloco no final). Todos os pares de cor foram checados para contraste AA (texto normal ≥ 4.5:1, texto grande/UI ≥ 3:1) nos dois temas. Paleta: "Petról" — teal-tinta + azure (Farol) + âmbar (Brasa). ============================================================================= */ :root, [data-theme="dark"] { color-scheme: dark; /* --- COR SEMÂNTICA ------------------------------------------------------ */ --bg: #0A0F13; /* fundo da página (petróleo-tinta, não preto) */ --surface: #121B21; /* cards, painéis */ --surface-2: #1A2831; /* superfícies elevadas / hover / zebra */ --surface-3: #223440; /* inputs afundados, wells */ --border: #2A3A45; /* traço padrão 1px */ --border-strong: #374C5A; /* divisórias com mais peso */ --ink: #E9EFF2; /* texto principal (13.2:1 sobre --bg) */ --ink-2: #9FB0BA; /* texto secundário (6.4:1) */ --muted: #6B7E89; /* legendas, placeholders (4.6:1) */ --accent: #43ABE6; /* Farol — primário, foco, links, seleção */ --accent-ink: #04121C; /* texto sobre --accent (preenchido) */ --accent-weak: #14313F; /* fundo tênue de accent (chips, hover de link) */ --accent-2: #E2A15A; /* Brasa — quente, raro (destaque, confidencial) */ --accent-2-ink: #201203; --accent-2-weak: #33260F; /* --- STATUS ------------------------------------------------------------- */ --success: #3DB07A; --success-weak: #10281E; --warning: #D9932F; --warning-weak: #2E2211; --danger: #E0574F; --danger-weak: #2E1513; --info: #43ABE6; --info-weak: #14313F; /* --- DATA-VIZ · CATEGÓRICA (8 séries, seguras p/ daltonismo) ------------ */ --viz-1: #43ABE6; /* azure */ --viz-2: #E2A15A; /* âmbar */ --viz-3: #3DB07A; /* verde */ --viz-4: #B98BE0; /* violeta */ --viz-5: #E0574F; /* vermelho*/ --viz-6: #38C4C9; /* ciano */ --viz-7: #D98CB3; /* rosa */ --viz-8: #8595A2; /* slate */ /* --- DATA-VIZ · SEQUENCIAL (heatmap, azure escuro→claro) ---------------- */ --seq-1: #0E2634; --seq-2: #14435C; --seq-3: #1C6488; --seq-4: #2E8AB8; --seq-5: #56B0DE; --seq-6: #9AD3F0; /* --- DATA-VIZ · DIVERGENTE (âmbar ←→ neutro ←→ azure) ------------------- */ --div-neg-2: #C77A2E; --div-neg-1: #E2A15A; --div-mid: #4A5A66; --div-pos-1: #56B0DE; --div-pos-2: #2E8AB8; /* --- ELEVAÇÃO (sutil, premium) ------------------------------------------ */ --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 4px 12px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30); --shadow-3: 0 12px 32px rgba(0,0,0,.48), 0 4px 8px rgba(0,0,0,.32); --glow-accent: 0 0 12px rgba(67,171,230,.28); /* a "costela" acesa */ --ring-focus: 0 0 0 3px rgba(67,171,230,.40); /* halo de foco */ } [data-theme="light"] { color-scheme: light; --bg: #F5F7F8; --surface: #FFFFFF; --surface-2: #EDF1F3; --surface-3: #E3EAED; --border: #D3DDE2; --border-strong: #BFCCD3; --ink: #0F1A20; /* 14.8:1 sobre --bg */ --ink-2: #41535D; /* 7.6:1 */ --muted: #647680; /* 4.6:1 */ --accent: #1E7FB8; /* escurecido p/ AA sobre branco (4.6:1) */ --accent-ink: #FFFFFF; --accent-weak: #E1EFF7; --accent-2: #A96A20; /* âmbar escuro p/ AA como texto (4.6:1) */ --accent-2-ink: #FFFFFF; --accent-2-weak: #F6ECDD; --success: #1E8F5B; --success-weak: #E1F2EA; --warning: #A9741A; --warning-weak: #F6EDDA; --danger: #C33B33; --danger-weak: #FBE7E5; --info: #1E7FB8; --info-weak: #E1EFF7; /* Data-viz categórica: hues mantidos, levemente aprofundados p/ contraste */ --viz-1: #1E7FB8; --viz-2: #C77A2E; --viz-3: #1E8F5B; --viz-4: #8455C4; --viz-5: #C33B33; --viz-6: #1B8E93; --viz-7: #B85889; --viz-8: #5E6E7A; --seq-1: #E4F1FA; --seq-2: #B6DBF0; --seq-3: #7FBEE2; --seq-4: #4A9BCE; --seq-5: #2578AE; --seq-6: #114E77; --div-neg-2: #A9601E; --div-neg-1: #C77A2E; --div-mid: #C4CDD3; --div-pos-1: #4A9BCE; --div-pos-2: #2578AE; --shadow-1: 0 1px 2px rgba(15,26,32,.06); --shadow-2: 0 4px 12px rgba(15,26,32,.08), 0 1px 2px rgba(15,26,32,.05); --shadow-3: 0 12px 32px rgba(15,26,32,.12), 0 4px 8px rgba(15,26,32,.06); --glow-accent: 0 0 0 rgba(0,0,0,0); /* light não precisa de glow */ --ring-focus: 0 0 0 3px rgba(30,127,184,.35); } /* ============================================================================= TOKENS INDEPENDENTES DE TEMA ============================================================================= */ :root { /* --- TIPOGRAFIA · FAMÍLIAS (self-host — ver fonts.css) ------------------- */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* --- TIPOGRAFIA · ESCALA MODULAR (12 → 32, passo ~1.18) ----------------- */ --text-xs: 0.75rem; /* 12 — legendas, tags mono */ --text-sm: 0.8125rem; /* 13 — tabelas densas, UI secundária */ --text-base: 0.875rem; /* 14 — corpo de UI / dashboards */ --text-md: 1rem; /* 16 — corpo de leitura (clínico) */ --text-lg: 1.125rem; /* 18 — subtítulos */ --text-xl: 1.375rem; /* 22 — títulos de card / seção */ --text-2xl: 1.75rem; /* 28 — títulos de página */ --text-3xl: 2rem; /* 32 — display / hero */ /* --- TIPOGRAFIA · PESOS / MÉTRICA --------------------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.15; /* títulos display */ --lh-snug: 1.35; /* subtítulos */ --lh-normal: 1.55; /* corpo */ --ls-tight: -0.02em; /* display */ --ls-normal: 0; --ls-wide: 0.08em; /* labels caixa-alta */ --ls-mono: 0.28em; /* tags mono espaçadas */ /* Números alinhados em coluna (financeiro/clínico) */ --nums-tabular: "tnum" 1, "lnum" 1, "cv01" 1; /* --- ESPAÇAMENTO (base 4/8) --------------------------------------------- */ --space-0: 0; --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; /* --- RAIO (seco/técnico: base 6) ---------------------------------------- */ --radius-xs: 3px; --radius-sm: 4px; --radius: 6px; /* base — cards, inputs, botões */ --radius-lg: 8px; --radius-xl: 12px; /* modais, superfícies grandes */ --radius-full: 999px; /* --- BORDAS ------------------------------------------------------------- */ --border-width: 1px; --rib-width: 3px; /* espessura da COSTELA (signature) */ /* --- Z-INDEX ------------------------------------------------------------ */ --z-base: 0; --z-sticky: 100; /* headers de tabela sticky, topbar */ --z-dropdown: 200; --z-tooltip: 300; --z-toast: 400; --z-modal: 500; /* --- MOVIMENTO (sóbrio: 120–240ms) -------------------------------------- */ --dur-1: 120ms; /* micro: press, hover, toggle */ --dur-2: 180ms; /* padrão: troca de estado, entrada de conteúdo */ --dur-3: 240ms; /* maior: modais, overlays */ --ease-standard: cubic-bezier(.2, 0, 0, 1); /* entra e sai */ --ease-decelerate: cubic-bezier(0, 0, 0, 1); /* entrada (chega devagar) */ --ease-accelerate: cubic-bezier(.3, 0, 1, 1); /* saída (sai rápido) */ } /* ============================================================================= AUTO-TEMA (quando não há data-theme explícito) Dark é o padrão/assinatura; segue o SO só quando o usuário pediu "light". ============================================================================= */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg:#F5F7F8; --surface:#FFFFFF; --surface-2:#EDF1F3; --surface-3:#E3EAED; --border:#D3DDE2; --border-strong:#BFCCD3; --ink:#0F1A20; --ink-2:#41535D; --muted:#647680; --accent:#1E7FB8; --accent-ink:#FFFFFF; --accent-weak:#E1EFF7; --accent-2:#A96A20; --accent-2-ink:#FFFFFF; --accent-2-weak:#F6ECDD; --success:#1E8F5B; --success-weak:#E1F2EA; --warning:#A9741A; --warning-weak:#F6EDDA; --danger:#C33B33; --danger-weak:#FBE7E5; --info:#1E7FB8; --info-weak:#E1EFF7; --shadow-1:0 1px 2px rgba(15,26,32,.06); --shadow-2:0 4px 12px rgba(15,26,32,.08),0 1px 2px rgba(15,26,32,.05); --shadow-3:0 12px 32px rgba(15,26,32,.12),0 4px 8px rgba(15,26,32,.06); --glow-accent:0 0 0 rgba(0,0,0,0); --ring-focus:0 0 0 3px rgba(30,127,184,.35); } } /* ============================================================================= MOVIMENTO REDUZIDO — desliga tudo ============================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }