/* ============================================================ * THEME TOKENS * ---------------------------------------------------------- * All colors and a few sizing tokens live here, swapped via * data-theme on the element. Everything in main.css * references these variables so the two themes share layout. * ========================================================== */ :root { /* base size; settings drawer can scale this */ --base-font-size: 18px; /* spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; /* radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* layout */ --header-h: 56px; --max-w: 1280px; /* transitions */ --t-fast: 120ms ease; --t-med: 220ms ease; } /* ============================== LIGHT ============================== */ html[data-theme="light"] { --bg: #f4f6f5; --bg-elev: #ffffff; --bg-elev-2: #f9faf9; --surface: #ffffff; --text: #1d2421; --text-muted: #5e6b66; --text-dim: #8a948f; --border: #d8dfdb; --border-strong:#b9c4be; --accent: #3d6e5d; /* teal-green, your existing tone */ --accent-hover:#2f5848; --accent-soft: #ddf3ec; --accent-text: #ffffff; --secondary: #3464a3; /* blue from current "identity" color */ --success: #2e7a52; --warning: #d18a13; --danger: #b83333; --danger-soft: #f9e1e1; --vol-low: #4caf50; --vol-mid: #d6a82b; --vol-high: #c0392b; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 14px rgba(0,0,0,.08); --shadow-lg: 0 10px 30px rgba(0,0,0,.12); --cli-bg: #1a1f1d; --cli-text: #6fff47; } /* ============================== DARK =============================== */ html[data-theme="dark"] { --bg: #14181a; --bg-elev: #1c2124; --bg-elev-2: #232a2d; --surface: #1c2124; --text: #e8ece9; --text-muted: #9eaba5; --text-dim: #6c7a74; --border: #2c3438; --border-strong:#3a4549; --accent: #5fae90; /* lighter teal for dark mode */ --accent-hover:#76c4a6; --accent-soft: #1f3a31; --accent-text: #0c1411; --secondary: #6e9bd6; --success: #5fae90; --warning: #e6b35e; --danger: #e57373; --danger-soft: #3a1f1f; --vol-low: #5fae90; --vol-mid: #e6b35e; --vol-high: #e57373; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.5); --shadow-lg: 0 10px 30px rgba(0,0,0,.6); --cli-bg: #0d1311; --cli-text: #6fff47; } /* ============================== FONT SCALE ============================== */ html[data-fontsize="small"] { --base-font-size: 16px; } html[data-fontsize="medium"] { --base-font-size: 18px; } html[data-fontsize="large"] { --base-font-size: 20px; }