/* ═══════════════════════════════════════════════════════════════ DAMAS Design System v2 — TOKENS ─────────────────────────────────────────────────────────────── Este é o arquivo MAIS IMPORTANTE da migração. Contém todas as variáveis de design (cores, tipografia, espaçamento). Trocando este arquivo, ~70% do produto muda visualmente sem tocar em componente. Cole no DAMAS como `tokens.css` e importe primeiro no seu CSS principal. ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400;1,500&display=swap'); :root { /* ── SUPERFÍCIES (tema escuro padrão) ── */ --bg-0: oklch(0.16 0.012 250); /* fundo da página */ --bg-1: oklch(0.19 0.012 250); /* sidebar / chrome */ --bg-2: oklch(0.22 0.012 250); /* cards */ --bg-3: oklch(0.26 0.014 250); /* hover / elevado */ --bg-4: oklch(0.30 0.016 250); /* linhas de tabela */ /* ── LINHAS / DIVISORES ── */ --line: oklch(0.32 0.014 250); --line-strong: oklch(0.42 0.018 250); /* ── TEXTO (ink) ── */ --ink-0: oklch(0.96 0.005 250); /* alto contraste — títulos */ --ink-1: oklch(0.86 0.008 250); /* primário — corpo */ --ink-2: oklch(0.65 0.012 250); /* secundário — labels */ --ink-3: oklch(0.50 0.014 250); /* terciário — muted */ /* ── ACENTO (saffron — pode ser trocado) ── */ --accent: oklch(0.78 0.16 75); --accent-soft: oklch(0.78 0.16 75 / 0.15); --accent-glow: oklch(0.78 0.16 75 / 0.35); --on-accent: oklch(0.16 0.012 250); /* ── STATUS ── */ --ok: oklch(0.78 0.18 155); --warn: oklch(0.82 0.16 85); --danger: oklch(0.70 0.22 25); --info: oklch(0.75 0.15 230); /* ── TIPOGRAFIA ── */ --ff-sans: 'IBM Plex Sans', system-ui, sans-serif; --ff-mono: 'IBM Plex Mono', ui-monospace, monospace; --ff-serif: 'IBM Plex Serif', Georgia, serif; /* ── LAYOUT ── */ --sb-w: 60px; /* sidebar colapsada */ --sb-w-open: 240px; /* sidebar expandida */ --tape-h: 28px; /* altura do ticker */ --tb-h: 56px; /* altura da topbar */ --radius: 6px; --r-sm: 4px; /* ── SOMBRAS (só no tema claro) ── */ --shadow-soft: none; --shadow-card: none; } /* ═══════════════════════════════════════════════════════════════ TEMA CLARO — ativado via [data-theme="light"] no "Paper-and-ink" — superfícies off-white, tinta quase preta. ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg-0: oklch(0.985 0.003 95); --bg-1: oklch(0.965 0.004 95); --bg-2: oklch(0.985 0.003 95); --bg-3: oklch(0.945 0.006 95); --bg-4: oklch(0.925 0.008 95); --line: oklch(0.88 0.006 95); --line-strong: oklch(0.78 0.008 95); --ink-0: oklch(0.18 0.012 250); --ink-1: oklch(0.30 0.010 250); --ink-2: oklch(0.46 0.010 250); --ink-3: oklch(0.60 0.010 250); --ok: oklch(0.55 0.16 155); --warn: oklch(0.62 0.16 75); --danger: oklch(0.55 0.22 25); --info: oklch(0.55 0.16 230); --shadow-soft: 0 1px 2px oklch(0.20 0.012 250 / 0.04); --shadow-card: 0 1px 0 oklch(0.20 0.012 250 / 0.03); } /* ── RESET MÍNIMO ── */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg-0); color: var(--ink-1); font-family: var(--ff-sans); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }