/* ========================================================================= Monk Router — Design tokens ========================================================================= Light theme is the default; dark theme is applied via [data-theme="dark"] on . The theme is set by the inline script in each page's (reads localStorage.monkTheme) to avoid a flash. Token groups: - Palette (12 core semantic colors, light + dark) - Soft semantic variants (badges, callouts — tinted bg + readable fg) - Typography scale - Spacing scale - Radii ========================================================================= */ :root { /* ---- Palette (light, default) ---- */ --bg: #FAFAF9; --surface: #FFFFFF; --surface-alt: #F1F1F4; --text: #14131A; --text-muted: #6B6B76; --border: #E4E4E9; --brand: #2A3AAE; --brand-strong: #1E2A78; --accent: #E8912B; --accent-strong: #C97514; --danger: #C73838; --danger-strong: #A52828; --success: #1F8A55; /* ---- Soft semantic variants (badges, callouts) ---- Each semantic state has a tinted background + a readable foreground. In dark mode the bg darkens and the fg lightens so contrast holds. */ --success-bg: #DCFCE7; --success-fg: #166534; --danger-bg: #FEE2E2; --danger-fg: #991B1B; --warn-bg: #FEF3C7; --warn-fg: #92400E; --warn-border: #FED7AA; --info-bg: #E0F2FE; --info-fg: #075985; --accent-bg: #FFF7ED; --accent-fg: #7C2D12; /* ---- Typography ---- */ --font-sm: 0.8rem; --font-base: 1rem; --font-lg: 1.1rem; --font-xl: 1.8rem; --font-2xl: 2.4rem; /* ---- Spacing scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---- Radii ---- */ --radius-sm: 6px; /* inputs, buttons */ --radius-md: 8px; /* small cards, chips */ --radius: 12px; /* cards, panels */ --radius-pill: 9999px; /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12); /* ---- Layout ---- */ --sidebar-w: 240px; --topbar-h: 56px; --content-max: 1200px; /* ---- Motion ---- */ --transition: 150ms ease; } :root[data-theme="dark"] { /* ---- Palette (dark) ---- */ --bg: #0B0B10; --surface: #16161D; --surface-alt: #1E1E27; --text: #F1F1F4; --text-muted: #9A99A6; --border: #2A2A34; --brand: #5C6FEA; --brand-strong: #7C8CF2; --accent: #F5A623; --accent-strong: #FFB84D; --danger: #E4605F; --danger-strong: #FF8585; --success: #3FD07E; /* ---- Soft semantic variants (dark) ---- */ --success-bg: #1F3D2C; --success-fg: #3FD07E; --danger-bg: #3D1F22; --danger-fg: #E4605F; --warn-bg: #3D2F12; --warn-fg: #F5A623; --warn-border: #5A4519; --info-bg: #1A2A3D; --info-fg: #5C9FEA; --accent-bg: #3D2812; --accent-fg: #F5A623; /* ---- Shadows (dark) ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 4px rgba(0, 0, 0, 0.5); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6); }