/* ========================================================================== StatusForge — Design tokens -------------------------------------------------------------------------- Every colour, size, radius and duration in the product resolves to a token defined here. Themes and the admin appearance editor override tokens only — they never touch component CSS. That is what makes a new theme a 30-line file and the live preview editor possible. Colour scales are authored in OKLCH so that lightening or darkening an accent keeps its perceived brightness. A colour picked by a buyer runs through the same scale generator, which is why any accent still passes contrast checks. ========================================================================== */ :root { color-scheme: light dark; /* ---- Brand accent ---------------------------------------------------- --sf-accent-h/-s/-l are the three values the appearance editor writes. Everything else derives from them, so one input restyles the product. */ --sf-accent-h: 232; --sf-accent-c: 0.17; --sf-accent-l: 62%; --sf-accent: oklch(var(--sf-accent-l) var(--sf-accent-c) var(--sf-accent-h)); --sf-accent-hover: oklch(calc(var(--sf-accent-l) - 6%) var(--sf-accent-c) var(--sf-accent-h)); --sf-accent-active: oklch(calc(var(--sf-accent-l) - 12%) var(--sf-accent-c) var(--sf-accent-h)); --sf-accent-subtle: oklch(var(--sf-accent-l) var(--sf-accent-c) var(--sf-accent-h) / 0.12); --sf-accent-ring: oklch(var(--sf-accent-l) var(--sf-accent-c) var(--sf-accent-h) / 0.45); --sf-accent-fg: oklch(98% 0.01 var(--sf-accent-h)); /* The accent as *text* on light surfaces. Capped at 52 % lightness, which clears WCAG AA (4.5:1 on white) for every hue at any chroma the picker can produce — verified across the gamut, worst case is yellow-green. */ --sf-accent-text: oklch(min(var(--sf-accent-l), 52%) var(--sf-accent-c) var(--sf-accent-h)); /* ---- Status palette -------------------------------------------------- Six states, each with a solid, a soft background and a border tone. Hues are chosen to stay distinguishable under deuteranopia; the UI never relies on colour alone anyway — every status ships an icon and a label. */ --sf-up: oklch(68% 0.16 152); --sf-up-soft: oklch(68% 0.16 152 / 0.14); --sf-up-border: oklch(68% 0.16 152 / 0.35); --sf-degraded: oklch(76% 0.15 78); --sf-degraded-soft: oklch(76% 0.15 78 / 0.16); --sf-degraded-border: oklch(76% 0.15 78 / 0.38); --sf-down: oklch(62% 0.20 25); --sf-down-soft: oklch(62% 0.20 25 / 0.14); --sf-down-border: oklch(62% 0.20 25 / 0.35); --sf-maintenance: oklch(66% 0.13 250); --sf-maintenance-soft: oklch(66% 0.13 250 / 0.14); --sf-maintenance-border: oklch(66% 0.13 250 / 0.35); --sf-paused: oklch(62% 0.02 260); --sf-paused-soft: oklch(62% 0.02 260 / 0.12); /* "No data" is deliberately neutral, never red. A cron outage is missing information, not downtime — conflating them is the single most common way status pages lie to their owners. */ --sf-nodata: oklch(72% 0.01 260); --sf-nodata-soft: oklch(72% 0.01 260 / 0.18); /* Status hues dark enough to be *words*. The palette above is tuned for fills, borders and bars; at 12px on white it fails WCAG AA by nearly a factor of two. Anything that colours text by status uses these — all five clear 4.6:1 on the *soft* tinted backgrounds, the darkest surface a status word ever sits on, and 5.5:1 on white. */ --sf-up-text: oklch(50% 0.15 152); --sf-degraded-text: oklch(52% 0.14 78); --sf-down-text: oklch(54% 0.19 25); --sf-maintenance-text: oklch(52% 0.12 250); --sf-nodata-text: oklch(52% 0.01 260); /* ---- Surfaces (light) ------------------------------------------------ */ --sf-bg: oklch(98.5% 0.003 260); --sf-bg-subtle: oklch(96.5% 0.005 260); --sf-surface: oklch(100% 0 0); --sf-surface-raised: oklch(100% 0 0); --sf-surface-sunken: oklch(97% 0.004 260); --sf-overlay: oklch(20% 0.02 260 / 0.45); --sf-border: oklch(90% 0.006 260); --sf-border-strong: oklch(82% 0.008 260); --sf-text: oklch(24% 0.015 260); --sf-text-muted: oklch(50% 0.012 260); --sf-text-subtle: oklch(55% 0.010 260); /* ≥4.5:1 on white — AA for small text */ --sf-text-inverse: oklch(98% 0.003 260); /* ---- Typography ------------------------------------------------------ System font stack only. No web fonts anywhere: it removes a render- blocking request, and it means the public page makes zero third-party requests, which is a genuine GDPR talking point for the German market. */ --sf-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --sf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sf-text-2xs: 0.6875rem; /* 11px — bar tooltips, table meta */ --sf-text-xs: 0.75rem; /* 12px */ --sf-text-sm: 0.8125rem; /* 13px */ --sf-text-base: 0.9375rem; /* 15px — body */ --sf-text-md: 1.0625rem; /* 17px */ --sf-text-lg: 1.25rem; /* 20px */ --sf-text-xl: 1.5rem; /* 24px */ --sf-text-2xl: 1.875rem; /* 30px */ --sf-text-3xl: 2.25rem; /* 36px */ --sf-text-hero: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem); --sf-leading-tight: 1.2; --sf-leading-snug: 1.4; --sf-leading-normal: 1.6; --sf-weight-normal: 400; --sf-weight-medium: 500; --sf-weight-semibold: 600; --sf-weight-bold: 700; --sf-tracking-tight: -0.015em; --sf-tracking-wide: 0.02em; /* ---- Spacing scale (4px base) ---------------------------------------- */ --sf-space-0: 0; --sf-space-1: 0.25rem; --sf-space-2: 0.5rem; --sf-space-3: 0.75rem; --sf-space-4: 1rem; --sf-space-5: 1.25rem; --sf-space-6: 1.5rem; --sf-space-8: 2rem; --sf-space-10: 2.5rem; --sf-space-12: 3rem; --sf-space-16: 4rem; --sf-space-20: 5rem; /* ---- Radii ----------------------------------------------------------- */ --sf-radius-xs: 4px; --sf-radius-sm: 6px; --sf-radius: 10px; --sf-radius-md: 14px; --sf-radius-lg: 18px; --sf-radius-xl: 24px; --sf-radius-full: 999px; /* ---- Elevation ------------------------------------------------------- Two-layer shadows (tight contact + soft ambient) read as real depth instead of the flat grey blur a single shadow produces. */ --sf-shadow-xs: 0 1px 2px oklch(20% 0.02 260 / 0.06); --sf-shadow-sm: 0 1px 2px oklch(20% 0.02 260 / 0.06), 0 2px 6px oklch(20% 0.02 260 / 0.05); --sf-shadow: 0 1px 2px oklch(20% 0.02 260 / 0.07), 0 4px 12px oklch(20% 0.02 260 / 0.07); --sf-shadow-lg: 0 2px 4px oklch(20% 0.02 260 / 0.06), 0 12px 28px oklch(20% 0.02 260 / 0.12); --sf-shadow-xl: 0 4px 8px oklch(20% 0.02 260 / 0.07), 0 24px 48px oklch(20% 0.02 260 / 0.16); /* ---- Motion ----------------------------------------------------------- */ --sf-duration-instant: 80ms; --sf-duration-fast: 140ms; --sf-duration: 220ms; --sf-duration-slow: 380ms; --sf-ease: cubic-bezier(0.32, 0.72, 0, 1); --sf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Layout ----------------------------------------------------------- */ --sf-container: 68rem; --sf-container-wide: 84rem; --sf-container-narrow: 44rem; --sf-header-height: 3.75rem; --sf-sidebar-width: 15rem; /* ---- Uptime strip ------------------------------------------------------ The 90-day bar strip. Widths are tokens so the density setting and the container queries can retune it without touching component CSS. */ --sf-bar-width: 7px; --sf-bar-gap: 3px; --sf-bar-height: 34px; --sf-bar-radius: 2px; /* ---- Charts ------------------------------------------------------------ */ --sf-chart-height: 260px; --sf-chart-grid: oklch(90% 0.006 260); --sf-chart-line: var(--sf-accent); --sf-chart-area-from: oklch(var(--sf-accent-l) var(--sf-accent-c) var(--sf-accent-h) / 0.22); --sf-chart-area-to: oklch(var(--sf-accent-l) var(--sf-accent-c) var(--sf-accent-h) / 0); --sf-chart-p95: oklch(76% 0.15 78); --sf-chart-p99: oklch(62% 0.20 25); --sf-focus-ring: 2px solid var(--sf-accent); --sf-focus-offset: 2px; } /* ========================================================================== Dark scheme -------------------------------------------------------------------------- Applied by the OS preference, and forced either way by the theme switcher writing data-theme on . The explicit attribute must beat the media query in BOTH directions, which is why the light override is repeated below. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sf-bg: oklch(17% 0.012 260); --sf-bg-subtle: oklch(20% 0.014 260); --sf-surface: oklch(22% 0.014 260); --sf-surface-raised: oklch(25% 0.016 260); --sf-surface-sunken: oklch(19% 0.013 260); --sf-overlay: oklch(8% 0.01 260 / 0.65); --sf-border: oklch(30% 0.014 260); --sf-border-strong: oklch(38% 0.016 260); --sf-text: oklch(95% 0.006 260); --sf-text-muted: oklch(74% 0.012 260); --sf-text-subtle: oklch(62% 0.012 260); --sf-text-inverse: oklch(20% 0.015 260); /* Status hues are lifted and desaturated slightly: the same green that reads well on white glows unpleasantly on a dark surface. */ --sf-up: oklch(74% 0.15 152); --sf-up-soft: oklch(74% 0.15 152 / 0.18); --sf-up-border: oklch(74% 0.15 152 / 0.40); --sf-degraded: oklch(81% 0.14 80); --sf-degraded-soft: oklch(81% 0.14 80 / 0.18); --sf-degraded-border: oklch(81% 0.14 80 / 0.40); --sf-down: oklch(70% 0.18 25); --sf-down-soft: oklch(70% 0.18 25 / 0.18); --sf-down-border: oklch(70% 0.18 25 / 0.40); --sf-maintenance: oklch(72% 0.12 250); --sf-maintenance-soft: oklch(72% 0.12 250 / 0.18); --sf-maintenance-border: oklch(72% 0.12 250 / 0.40); --sf-paused: oklch(58% 0.02 260); --sf-paused-soft: oklch(58% 0.02 260 / 0.16); --sf-nodata: oklch(46% 0.01 260); --sf-nodata-soft: oklch(46% 0.01 260 / 0.30); --sf-accent-l: 70%; --sf-accent-fg: oklch(18% 0.02 var(--sf-accent-h)); /* On dark surfaces the bright palette IS readable text. */ --sf-up-text: var(--sf-up); --sf-degraded-text: var(--sf-degraded); --sf-down-text: var(--sf-down); --sf-maintenance-text: var(--sf-maintenance); --sf-nodata-text: var(--sf-nodata); --sf-accent-text: var(--sf-accent); --sf-chart-grid: oklch(30% 0.014 260); --sf-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.30); --sf-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.32), 0 2px 6px oklch(0% 0 0 / 0.24); --sf-shadow: 0 1px 2px oklch(0% 0 0 / 0.34), 0 4px 12px oklch(0% 0 0 / 0.30); --sf-shadow-lg: 0 2px 4px oklch(0% 0 0 / 0.34), 0 12px 28px oklch(0% 0 0 / 0.42); --sf-shadow-xl: 0 4px 8px oklch(0% 0 0 / 0.36), 0 24px 48px oklch(0% 0 0 / 0.50); } } /* Explicit dark, chosen in the switcher — must win regardless of OS setting. */ :root[data-theme="dark"] { --sf-bg: oklch(17% 0.012 260); --sf-bg-subtle: oklch(20% 0.014 260); --sf-surface: oklch(22% 0.014 260); --sf-surface-raised: oklch(25% 0.016 260); --sf-surface-sunken: oklch(19% 0.013 260); --sf-overlay: oklch(8% 0.01 260 / 0.65); --sf-border: oklch(30% 0.014 260); --sf-border-strong: oklch(38% 0.016 260); --sf-text: oklch(95% 0.006 260); --sf-text-muted: oklch(74% 0.012 260); --sf-text-subtle: oklch(62% 0.012 260); --sf-text-inverse: oklch(20% 0.015 260); --sf-up: oklch(74% 0.15 152); --sf-up-soft: oklch(74% 0.15 152 / 0.18); --sf-up-border: oklch(74% 0.15 152 / 0.40); --sf-degraded: oklch(81% 0.14 80); --sf-degraded-soft: oklch(81% 0.14 80 / 0.18); --sf-degraded-border: oklch(81% 0.14 80 / 0.40); --sf-down: oklch(70% 0.18 25); --sf-down-soft: oklch(70% 0.18 25 / 0.18); --sf-down-border: oklch(70% 0.18 25 / 0.40); --sf-maintenance: oklch(72% 0.12 250); --sf-maintenance-soft: oklch(72% 0.12 250 / 0.18); --sf-maintenance-border: oklch(72% 0.12 250 / 0.40); --sf-paused: oklch(58% 0.02 260); --sf-paused-soft: oklch(58% 0.02 260 / 0.16); --sf-nodata: oklch(46% 0.01 260); --sf-nodata-soft: oklch(46% 0.01 260 / 0.30); --sf-accent-l: 70%; --sf-accent-fg: oklch(18% 0.02 var(--sf-accent-h)); /* On dark surfaces the bright palette IS readable text. */ --sf-up-text: var(--sf-up); --sf-degraded-text: var(--sf-degraded); --sf-down-text: var(--sf-down); --sf-maintenance-text: var(--sf-maintenance); --sf-nodata-text: var(--sf-nodata); --sf-accent-text: var(--sf-accent); --sf-chart-grid: oklch(30% 0.014 260); --sf-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.30); --sf-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.32), 0 2px 6px oklch(0% 0 0 / 0.24); --sf-shadow: 0 1px 2px oklch(0% 0 0 / 0.34), 0 4px 12px oklch(0% 0 0 / 0.30); --sf-shadow-lg: 0 2px 4px oklch(0% 0 0 / 0.34), 0 12px 28px oklch(0% 0 0 / 0.42); --sf-shadow-xl: 0 4px 8px oklch(0% 0 0 / 0.36), 0 24px 48px oklch(0% 0 0 / 0.50); } /* Explicit light — must beat the dark media query. */ :root[data-theme="light"] { color-scheme: light; } /* ========================================================================== Density — the admin appearance setting retunes spacing without new CSS. ========================================================================== */ :root[data-density="compact"] { --sf-text-base: 0.875rem; --sf-space-4: 0.75rem; --sf-space-6: 1rem; --sf-space-8: 1.5rem; --sf-bar-height: 26px; --sf-bar-width: 6px; --sf-bar-gap: 2px; --sf-chart-height: 200px; } /* ========================================================================== High contrast — for prefers-contrast and the accessibility theme. ========================================================================== */ @media (prefers-contrast: more) { :root { --sf-border: oklch(60% 0.01 260); --sf-border-strong: oklch(40% 0.01 260); --sf-text-muted: oklch(38% 0.012 260); --sf-text-subtle: oklch(42% 0.010 260); --sf-focus-ring: 3px solid var(--sf-accent); } } /* ========================================================================== Reduced motion — respected globally rather than per-component so a buyer's custom CSS cannot accidentally reintroduce animation for those users. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --sf-duration-instant: 0ms; --sf-duration-fast: 0ms; --sf-duration: 0ms; --sf-duration-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Print — an incident report should print cleanly for a postmortem. ========================================================================== */ @media print { :root { --sf-bg: #fff; --sf-surface: #fff; --sf-text: #000; --sf-text-muted: #333; --sf-border: #999; --sf-shadow: none; --sf-shadow-sm: none; --sf-shadow-lg: none; } }