/** * variables.css * Design tokens — single source of truth for colors, spacing, and typography. * Swap themes by toggling the `dark` class on . */ /* ── Google Fonts import ──────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Source+Serif+4:wght@400;500;600;700&display=swap'); /* ── Light theme (default) ───────────────────────────────────────────────── */ :root { /* Backgrounds */ --color-bg: #dfe8df; --color-bg-soft: #edf3ea; --color-panel: #f7f3e7; --color-card: #fcf9f0; --color-sidebar: #f0ece0; /* Borders */ --color-border: rgba(138, 154, 91, 0.30); --color-border-mid: rgba(138, 154, 91, 0.55); /* Brand / Accent */ --color-accent: #c5a059; /* gold */ --color-accent-soft: #f0e3c8; --color-accent-dark: #a8803e; --color-primary: #8a9a5b; /* sage green */ --color-primary-dark:#6f7f52; /* Text */ --color-text: #24352f; --color-text-muted: #6f7f52; --color-text-light: #9aaa7b; /* Status */ --color-success: #3a7d54; --color-success-bg: #e6f4ec; --color-danger: #9b432a; --color-danger-bg: #fbeee9; --color-warning: #a47c0b; --color-warning-bg: #fdf6e3; --color-info: #2a6b8a; --color-info-bg: #e3f2f9; /* Shadows */ --shadow-sm: 0 1px 4px rgba(36, 53, 47, 0.07); --shadow-md: 0 4px 16px rgba(36, 53, 47, 0.10); --shadow-lg: 0 12px 36px rgba(36, 53, 47, 0.14); --shadow-glow:0 0 0 3px rgba(138, 154, 91, 0.18); /* Layout */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --header-height: 60px; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; /* Typography */ --font-sans: 'Montserrat', sans-serif; --font-serif: 'Cormorant Garamond', serif; --font-mono: 'Courier New', monospace; /* Transitions */ --transition: 200ms ease; --transition-slow: 320ms ease; } /* ── Alternate font packs ─────────────────────────────────────────────────── */ html[data-font='technical'] { --font-sans: 'IBM Plex Sans', sans-serif; --font-serif: 'IBM Plex Serif', serif; } html[data-font='fintech'] { --font-sans: 'Inter', sans-serif; --font-serif: 'Source Serif 4', serif; } /* ── Dark theme ──────────────────────────────────────────────────────────── */ html.dark { --color-bg: #0f1d1a; --color-bg-soft: #152522; --color-panel: #1a2e28; --color-card: #1f3530; --color-sidebar: #132320; --color-border: rgba(138, 154, 91, 0.18); --color-border-mid: rgba(138, 154, 91, 0.35); --color-accent: #c5a059; --color-accent-soft: rgba(197, 160, 89, 0.15); --color-accent-dark: #dbbe80; --color-primary: #8a9a5b; --color-primary-dark:#a8bb72; --color-text: #f4f1e1; --color-text-muted: #8a9a5b; --color-text-light: #5c6e42; --color-success: #5aad7a; --color-success-bg: #1a3028; --color-danger: #d47055; --color-danger-bg: #2e1812; --color-warning: #d4a832; --color-warning-bg: #2e2412; --color-info: #4a9ec0; --color-info-bg: #122535; --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.38); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.50); --shadow-glow:0 0 0 3px rgba(138, 154, 91, 0.22); } /* ── Midnight theme (inspired by another-theme/assets/ui.css) ───────────── */ html[data-theme='midnight'] { --color-bg: #0f1117; --color-bg-soft: #12141e; --color-panel: #1a1d27; --color-card: #1a1d27; --color-sidebar: #12141e; --color-border: #2a2d3a; --color-border-mid: #3a3d4e; --color-accent: #6c63ff; --color-accent-soft: rgba(108, 99, 255, 0.12); --color-accent-dark: #8f88ff; --color-primary: #6c63ff; --color-primary-dark:#8f88ff; --color-text: #e2e4f0; --color-text-muted: #7b7e94; --color-text-light: #9a9db3; --color-success: #00d4aa; --color-success-bg: rgba(0, 212, 170, 0.12); --color-danger: #ff6b6b; --color-danger-bg: rgba(255, 107, 107, 0.12); --color-warning: #ffd93d; --color-warning-bg: rgba(255, 217, 61, 0.12); --color-info: #60a5fa; --color-info-bg: rgba(96, 165, 250, 0.12); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.38); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.50); --shadow-glow:0 0 0 3px rgba(108, 99, 255, 0.2); }