/* ========================================================================== Author Monitoring Dashboard — Design Tokens Single source of truth for color, type, spacing, elevation and motion. Light theme is the default; dark theme overrides via [data-theme="dark"], which assets/js/theme-init.js stamps on before first paint. Data-viz palette is CVD-validated (see README — Design System). ========================================================================== */ :root { color-scheme: light; /* ---- Neutral planes & ink -------------------------------------------- */ --bg: #f9f9f7; /* page plane */ --surface: #fcfcfb; /* cards / chart surface */ --surface-2: #f0efec; /* raised / hover wash */ --surface-3: #e6e5e0; /* pressed / track */ --ink: #0b0b0b; /* primary text */ --ink-2: #52514e; /* secondary text */ --ink-3: #898781; /* muted / axis labels */ --border: rgba(11, 11, 11, 0.10); /* hairline ring */ --border-strong: rgba(11, 11, 11, 0.18); --grid: #e1e0d9; /* chart gridline */ --baseline: #c3c2b7; /* chart axis / baseline */ --scrim: rgba(11, 11, 11, 0.44); /* modal backdrop */ /* ---- Brand / interactive --------------------------------------------- */ --accent: #2a78d6; --accent-hover: #256abf; --accent-active: #1c5cab; --accent-ink: #ffffff; /* text on accent */ --accent-soft: rgba(42, 120, 214, 0.10); --focus-ring: rgba(42, 120, 214, 0.45); /* ---- Status (reserved — never used as series colors) ------------------ */ --good: #0ca30c; --good-text: #006300; --good-soft: rgba(12, 163, 12, 0.12); --warning: #fab219; --warning-text: #7a5200; --warning-soft: rgba(250, 178, 25, 0.16); --serious: #ec835a; --serious-text: #9a3f18; --serious-soft: rgba(236, 131, 90, 0.16); --critical: #d03b3b; --critical-text: #b32020; --critical-soft: rgba(208, 59, 59, 0.12); /* ---- Categorical series (fixed order — never cycled) ------------------ */ --series-1: #2a78d6; /* blue */ --series-2: #008300; /* green */ --series-3: #e87ba4; /* magenta */ --series-4: #eda100; /* yellow */ --series-5: #1baf7a; /* aqua */ --series-6: #eb6834; /* orange */ --series-7: #4a3aa7; /* violet */ --series-8: #e34948; /* red */ /* ---- Sequential heat ramp (single hue, near-surface → dark) ----------- */ --heat-0: #f0efec; --heat-1: #cde2fb; --heat-2: #9ec5f4; --heat-3: #6da7ec; --heat-4: #3987e5; --heat-5: #256abf; --heat-6: #184f95; --heat-7: #0d366b; /* ---- Typography -------------------------------------------------------- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.875rem; /* 14px */ --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-hero: clamp(2rem, 1.5rem + 1.5vw, 3rem); /* ---- Geometry ---------------------------------------------------------- */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-full: 999px; --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --navbar-h: 56px; --content-max: 1440px; /* ---- Elevation ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05); --shadow-md: 0 2px 8px rgba(11, 11, 11, 0.07), 0 1px 2px rgba(11, 11, 11, 0.05); --shadow-lg: 0 12px 32px rgba(11, 11, 11, 0.14), 0 2px 8px rgba(11, 11, 11, 0.08); /* ---- Motion ------------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 320ms; } /* ========================================================================== Dark theme — selected steps of the same ramps, validated against #1a1a19. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0d0d0d; --surface: #1a1a19; --surface-2: #232322; --surface-3: #2c2c2a; --ink: #ffffff; --ink-2: #c3c2b7; --ink-3: #898781; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --grid: #2c2c2a; --baseline: #383835; --scrim: rgba(0, 0, 0, 0.60); --accent: #3987e5; --accent-hover: #5598e7; --accent-active: #6da7ec; --accent-ink: #0b1c30; --accent-soft: rgba(57, 135, 229, 0.16); --focus-ring: rgba(57, 135, 229, 0.55); --good-text: #0ca30c; --good-soft: rgba(12, 163, 12, 0.18); --warning-text: #fab219; --warning-soft: rgba(250, 178, 25, 0.16); --serious-text: #ec835a; --serious-soft: rgba(236, 131, 90, 0.16); --critical-text: #e66767; --critical-soft: rgba(208, 59, 59, 0.20); --series-1: #3987e5; --series-2: #008300; --series-3: #d55181; --series-4: #c98500; --series-5: #199e70; --series-6: #d95926; --series-7: #9085e9; --series-8: #e66767; /* Heat ramp on a dark surface: near-zero recedes toward the surface, magnitude climbs toward the light steps of the same blue hue. */ --heat-0: #232322; --heat-1: #10457f; --heat-2: #1c5cab; --heat-3: #2a78d6; --heat-4: #5598e7; --heat-5: #86b6ef; --heat-6: #b7d3f6; --heat-7: #cde2fb; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.40); } /* Reduced motion: collapse durations, keep state changes instant. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }