/* ============================================================================ Solune Dashboard — Design Tokens ---------------------------------------------------------------------------- Light : warm ivory canvas, lavender-slate accent Dark : deep navy canvas (no neon), same accent, calmer contrast Type : sans (Inter stack) ↔ serif (Iowan/Charter) toggle Radius: 4–8px range ========================================================================== */ :root { /* ---- Light theme (default) -------------------------------------------- */ --bg: oklch(98% 0.012 85); /* warm ivory */ --bg-soft: oklch(96% 0.014 85); --surface: oklch(99.5% 0.005 85); --surface-2: oklch(95% 0.014 85); --fg: oklch(22% 0.018 268); --fg-soft: oklch(38% 0.018 268); --muted: oklch(54% 0.012 268); --border: oklch(90% 0.008 268); --border-soft: oklch(93% 0.006 268); /* Accent — restrained lavender-slate */ --accent: oklch(58% 0.12 268); --accent-soft: oklch(94% 0.024 268); --accent-fg: oklch(99% 0.005 268); /* Status — desaturated, medical/clinical feel */ --success: oklch(58% 0.10 158); --warn: oklch(70% 0.13 70); --danger: oklch(58% 0.16 22); /* Chart series — calm, no neon */ --series-1: oklch(58% 0.12 268); /* primary */ --series-2: oklch(62% 0.10 210); /* secondary blue */ --series-3: oklch(68% 0.08 158); /* sage */ --series-4: oklch(70% 0.10 70); /* warm sand */ /* ---- Typography ------------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif; --font-serif: "Iowan Old Style", "Charter", "Source Serif Pro", Georgia, serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, monospace; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.55; /* ---- Shape & elevation ----------------------------------------------- */ --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-pill: 999px; --shadow-1: 0 1px 0 oklch(0% 0 0 / 0.04); --shadow-2: 0 1px 2px oklch(20% 0.02 268 / 0.06), 0 0 0 1px oklch(90% 0.008 268 / 0.6); --shadow-3: 0 6px 16px oklch(20% 0.02 268 / 0.08), 0 1px 0 oklch(90% 0.008 268 / 0.6); /* ---- Layout ----------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --sidebar-w: 232px; --sidebar-w-md: 64px; --topbar-h: 64px; --rightpanel-w: 320px; /* Active font family — toggled by JS via .font-serif on */ --font-active: var(--font-sans); } /* ============================================================================ Dark theme — deep navy, no neon. Same accent hue, calmer contrast. ========================================================================== */ :root[data-theme="dark"] { --bg: oklch(20% 0.028 258); /* deep navy */ --bg-soft: oklch(17% 0.026 258); --surface: oklch(24% 0.030 258); --surface-2: oklch(28% 0.030 258); --fg: oklch(96% 0.008 258); --fg-soft: oklch(82% 0.012 258); --muted: oklch(64% 0.016 258); --border: oklch(34% 0.022 258); --border-soft: oklch(30% 0.022 258); --accent: oklch(72% 0.10 268); /* slightly lifted so it reads on navy */ --accent-soft: oklch(32% 0.06 268); --accent-fg: oklch(15% 0.02 258); --success: oklch(72% 0.10 158); --warn: oklch(78% 0.12 70); --danger: oklch(70% 0.14 22); --series-1: oklch(72% 0.10 268); --series-2: oklch(74% 0.09 210); --series-3: oklch(76% 0.08 158); --series-4: oklch(78% 0.09 70); --shadow-1: 0 1px 0 oklch(0% 0 0 / 0.30); --shadow-2: 0 1px 2px oklch(0% 0 0 / 0.30), 0 0 0 1px oklch(34% 0.022 258 / 0.8); --shadow-3: 0 10px 24px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(34% 0.022 258 / 0.7); } /* Font family toggle — JS adds .font-serif on */ :root.font-serif { --font-active: var(--font-serif); }