/* ═══════════════════════════════════════ DESIGN TOKENS Paleta v3.4 — bronze + creme terroso Dark mode via [data-theme="dark"] ═══════════════════════════════════════ */ :root { /* ─── Brand ─── */ --amber: #B8721E; /* bronze, mais sóbrio que C17A24 */ --amber-hover: #A06416; --amber-lt: #E2A14A; /* dourado claro */ --amber-pale: #F5E6CC; /* fundo suave */ --amber-dim: rgba(184,114,30,.10); --amber-glow: rgba(184,114,30,.22); --gold: #D4A464; /* accent dourado pra realces premium */ /* ─── Surfaces (cremes mais quentes) ─── */ --bg: #F8F4ED; --surface: #FFFFFF; --surface2: #F2EBDD; --surface3: #E8DECD; /* ─── Borders ─── */ --bdr: rgba(56,40,20,.10); --bdr2: rgba(56,40,20,.06); --bdr-amber: rgba(184,114,30,.32); --bdr-strong: rgba(56,40,20,.18); /* ─── Text (mais quente, melhor contraste) ─── */ --txt: #1F1A12; /* near-black com warmth */ --txt2: #5C5043; --txt3: #9A8E80; --txt4: #C4B8A8; /* ─── Status ─── */ --green: #1A7A48; --green-hover: #156138; --green-bg: #E8F5EE; --green-bdr: #9CD6BC; --red: #B83F2F; --red-hover: #962F22; --red-bg: #FBEEEC; --red-bdr: #F0B5AC; --blue: #2563EB; --blue-bg: #EEF4FF; --purple: #7C3AED; --lime: #5A8A00; /* ─── Shadows (mais sutis) ─── */ --sh1: 0 1px 2px rgba(56,40,20,.06), 0 1px 3px rgba(56,40,20,.04); --sh2: 0 2px 8px rgba(56,40,20,.07), 0 4px 12px rgba(56,40,20,.05); --sh3: 0 6px 16px rgba(56,40,20,.10), 0 12px 32px rgba(56,40,20,.06); --sh-amber: 0 4px 16px rgba(184,114,30,.25); --sh-green: 0 4px 16px rgba(26,122,72,.22); /* ─── Tipografia ─── */ --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* ─── Curvas & timing ─── */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; /* ─── Raios ─── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; } /* ═══════════════════════════════════════ Dark mode — ativado por [data-theme="dark"] no Mantém identidade bronze + creme, só inverte superfícies. ═══════════════════════════════════════ */ [data-theme="dark"] { --amber: #D4904A; /* mais claro pra contrastar bem no escuro */ --amber-hover: #E2A14A; --amber-lt: #E8B872; --amber-pale: rgba(212,144,74,.12); --amber-dim: rgba(212,144,74,.14); --amber-glow: rgba(212,144,74,.28); --gold: #E8C078; --bg: #14110D; --surface: #1C1812; --surface2: #251F18; --surface3: #2E2820; --bdr: rgba(220,200,170,.10); --bdr2: rgba(220,200,170,.05); --bdr-amber: rgba(212,144,74,.35); --bdr-strong: rgba(220,200,170,.18); --txt: #F2EDE2; --txt2: #BFB5A6; --txt3: #847A6E; --txt4: #524A40; --green: #44B077; --green-hover: #5BC48C; --green-bg: rgba(68,176,119,.10); --green-bdr: rgba(68,176,119,.30); --red: #E07060; --red-hover: #E88578; --red-bg: rgba(224,112,96,.10); --red-bdr: rgba(224,112,96,.30); --blue: #6FA0FF; --blue-bg: rgba(111,160,255,.10); --purple: #A879FF; --sh1: 0 1px 2px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.24); --sh2: 0 2px 8px rgba(0,0,0,.36), 0 4px 12px rgba(0,0,0,.28); --sh3: 0 6px 16px rgba(0,0,0,.44), 0 12px 32px rgba(0,0,0,.34); --sh-amber: 0 4px 16px rgba(212,144,74,.30); --sh-green: 0 4px 16px rgba(68,176,119,.26); } /* Transição suave entre temas */ :root, [data-theme="dark"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } html, body { transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); }