/* ============================================================= CSS Custom Properties — Dark & Light Themes Theme is applied via [data-theme] on . ============================================================= */ /* ── Dark Theme (default) ── */ [data-theme="dark"], :root { /* Backgrounds */ --bg-base: #0d0f14; --bg-surface: #141720; --bg-elevated: #1c2030; --bg-hover: #222840; --bg-code: #0a0c10; /* Borders */ --border: #2a2f45; --border-subtle: #1e2335; /* Text */ --text-primary: #e8ecf0; --text-secondary: #8b95a8; --text-muted: #555e72; --text-inverse: #0d0f14; /* Accent — electric teal */ --accent: #4fc3f7; --accent-hover: #81d4fa; --accent-dim: rgba(79, 195, 247, 0.12); --accent-glow: rgba(79, 195, 247, 0.25); /* Status */ --success: #4caf7d; --warning: #f5a623; --danger: #e85d5d; --info: #4fc3f7; /* Callout backgrounds */ --callout-info-bg: rgba(79, 195, 247, 0.08); --callout-info-border:#4fc3f7; --callout-tip-bg: rgba(76, 175, 125, 0.08); --callout-tip-border: #4caf7d; --callout-warn-bg: rgba(245, 166, 35, 0.08); --callout-warn-border:#f5a623; /* Shadows */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); /* Scrollbar */ --scrollbar-thumb: #2a2f45; --scrollbar-track: #0d0f14; /* Nav */ --topbar-bg: rgba(13, 15, 20, 0.92); --sidebar-bg: #141720; --footer-bg: #0a0c10; } /* ── Light Theme ── */ [data-theme="light"] { /* Backgrounds */ --bg-base: #f4f6fb; --bg-surface: #ffffff; --bg-elevated: #edf0f7; --bg-hover: #e4e8f2; --bg-code: #f0f2f8; /* Borders */ --border: #d0d6e8; --border-subtle: #e4e8f2; /* Text */ --text-primary: #1a1f2e; --text-secondary: #4a5270; --text-muted: #8a93ab; --text-inverse: #ffffff; /* Accent — deeper blue */ --accent: #0277bd; --accent-hover: #01579b; --accent-dim: rgba(2, 119, 189, 0.08); --accent-glow: rgba(2, 119, 189, 0.15); /* Status */ --success: #2e7d52; --warning: #c77700; --danger: #c62828; --info: #0277bd; /* Callout backgrounds */ --callout-info-bg: rgba(2, 119, 189, 0.06); --callout-info-border:#0277bd; --callout-tip-bg: rgba(46, 125, 82, 0.06); --callout-tip-border: #2e7d52; --callout-warn-bg: rgba(199, 119, 0, 0.06); --callout-warn-border:#c77700; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); /* Scrollbar */ --scrollbar-thumb: #c8cedd; --scrollbar-track: #f4f6fb; /* Nav */ --topbar-bg: rgba(255, 255, 255, 0.92); --sidebar-bg: #ffffff; --footer-bg: #1a1f2e; } /* ── Typography Scale ── */ :root { --font-body: 'Sora', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.6; --leading-loose: 1.8; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Transitions */ --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 350ms ease; /* Layout */ --topbar-height: 60px; --sidebar-width: 240px; --content-max-w: 860px; --layout-max-w: 1280px; }