/* * Design tokens. * * Values are taken verbatim from the approved mockups so the built product and * the design files cannot drift apart. Nothing outside this file may hard-code * a colour, a radius or a shadow. * * Theme resolution order: * 1. data-theme on , written by the theme toggle (wins always) * 2. prefers-color-scheme, for a first visit with no stored choice */ :root { /* -- Surfaces ------------------------------------------------------- */ --bg: #FFFFFF; --bg-subtle: #F7F8FA; --surface: #FFFFFF; --surface-raised: #FFFFFF; --border: #E4E7EC; --border-strong: #D0D5DD; /* -- Text ----------------------------------------------------------- */ --text: #0F172A; --text-secondary: #475467; --text-muted: #98A2B3; --text-inverse: #FFFFFF; /* -- Brand ---------------------------------------------------------- */ --brand: #5B5BD6; --brand-hover: #4B4BC4; --brand-subtle: #EEEEFB; /* -- Status --------------------------------------------------------- */ --up: #12B76A; --up-bg: #ECFDF3; --down: #F04438; --down-bg: #FEF3F2; --degraded: #F79009; --degraded-bg: #FFFAEB; --maintenance: #6172F3; --maintenance-bg: #EEF4FF; --paused: #98A2B3; --paused-bg: #F2F4F7; --pending: #0BA5EC; --pending-bg: #F0F9FF; --nodata: #EAECF0; /* -- Elevation ------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow-md: 0 4px 12px rgba(16, 24, 40, .08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12); /* -- Type ----------------------------------------------------------- */ --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-display: 3rem; /* 48 / 56 */ --lh-display: 3.5rem; --fs-h1: 2rem; /* 32 / 40 */ --lh-h1: 2.5rem; --fs-h2: 1.5rem; /* 24 / 32 */ --lh-h2: 2rem; --fs-h3: 1.125rem; /* 18 / 26 */ --lh-h3: 1.625rem; --fs-body: 0.9375rem; /* 15 / 24 */ --lh-body: 1.5rem; --fs-small: 0.8125rem; /* 13 / 20 */ --lh-small: 1.25rem; --fs-micro: 0.75rem; /* 12 / 16 */ --lh-micro: 1rem; --fs-metric: 2.25rem; /* 36 / 40 */ --lh-metric: 2.5rem; /* -- Space: 4px base, only these steps are allowed ------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* -- Radius --------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* -- Motion --------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 260ms; --ease: cubic-bezier(.16, 1, .3, 1); /* -- Layout --------------------------------------------------------- */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --topbar-height: 60px; --content-max: 1280px; --marketing-max: 1200px; } /* Dark theme. Status hues stay identical - they carry meaning, not style - only their tinted backgrounds change so they stay legible on dark surfaces. */ :root[data-theme="dark"] { --bg: #0B0F19; --bg-subtle: #0F1524; --surface: #141B2D; --surface-raised: #1A2236; --border: #232B3E; --border-strong: #2E3852; --text: #E6EAF2; --text-secondary: #9AA4B8; --text-muted: #6B7688; --brand: #7C7CF0; --brand-hover: #8E8EF5; --brand-subtle: #1B2140; --up-bg: rgba(18, 183, 106, .15); --down-bg: rgba(240, 68, 56, .15); --degraded-bg: rgba(247, 144, 9, .15); --maintenance-bg: rgba(97, 114, 243, .15); --paused-bg: rgba(152, 162, 179, .15); --pending-bg: rgba(11, 165, 236, .15); --nodata: #232B3E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5); } /* First visit, no stored preference: follow the operating system. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B0F19; --bg-subtle: #0F1524; --surface: #141B2D; --surface-raised: #1A2236; --border: #232B3E; --border-strong: #2E3852; --text: #E6EAF2; --text-secondary: #9AA4B8; --text-muted: #6B7688; --brand: #7C7CF0; --brand-hover: #8E8EF5; --brand-subtle: #1B2140; --up-bg: rgba(18, 183, 106, .15); --down-bg: rgba(240, 68, 56, .15); --degraded-bg: rgba(247, 144, 9, .15); --maintenance-bg: rgba(97, 114, 243, .15); --paused-bg: rgba(152, 162, 179, .15); --pending-bg: rgba(11, 165, 236, .15); --nodata: #232B3E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5); } }