/* ========================================================================== MARQUEE — Design tokens Direction: "Broadcast Desk" — a broadcast graphics package meeting a rate card. Light mode only, by decision: this product is used in daylight offices and its most important artefact is a printed board report. ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOUR — OKLCH throughout. Strategy: Restrained canvas + one committed near-black chrome layer. Warmth lives in the brand (ember), never in the surface. ---------------------------------------------------------------------- */ /* Canvas */ --bg: oklch(1 0 0); /* pure white */ --surface: oklch(0.978 0.004 45); /* panels, cards */ --surface-2: oklch(0.958 0.005 45); /* sunken wells, hover rows */ --surface-3: oklch(0.936 0.005 45); /* deeper wells, track fills */ --line: oklch(0.905 0.004 45); /* hairlines */ --line-strong: oklch(0.845 0.005 45); /* dividers that need to read */ /* Text — contrast measured against --bg */ --ink: oklch(0.185 0.012 45); /* 16.1:1 headings + body */ --ink-2: oklch(0.375 0.011 45); /* 8.2:1 secondary */ --muted: oklch(0.505 0.010 45); /* 4.9:1 tertiary + placeholders */ /* Brand — ember */ --primary: oklch(0.52 0.172 41); /* white text on this = 5.3:1 */ --primary-hover: oklch(0.475 0.168 41); --primary-press: oklch(0.435 0.160 41); --primary-soft: oklch(0.962 0.028 45); /* selected rows, active nav wash */ --primary-soft-2:oklch(0.930 0.048 45); /* soft button hover */ --primary-line: oklch(0.855 0.075 45); /* border on soft fills */ --on-primary: oklch(1 0 0); /* Signal — acid lime. Highlighter only. Never more than ~5% of a screen. */ --signal: oklch(0.885 0.168 116); --signal-soft: oklch(0.962 0.062 116); --on-signal: oklch(0.22 0.050 116); /* Chrome — the second neutral layer: sidebar, topbar, report headers. Near-black with a warm trace. Deliberately not navy. */ --chrome: oklch(0.185 0.012 45); --chrome-2: oklch(0.245 0.013 45); --chrome-3: oklch(0.285 0.013 45); --chrome-ink: oklch(0.965 0.004 45); --chrome-ink-2: oklch(0.800 0.008 45); --chrome-muted: oklch(0.665 0.010 45); --chrome-line: oklch(0.305 0.012 45); /* Semantic. --danger sits 23° off --primary and always ships with an icon. */ --success: oklch(0.505 0.128 155); --success-soft: oklch(0.960 0.030 155); --success-line: oklch(0.860 0.060 155); /* Darkened from L 0.60 so white text on a warning fill measures 4.75:1 rather than 4.02:1 — at 0.60 it only cleared AA for large text. */ --warning: oklch(0.560 0.140 74); --warning-soft: oklch(0.966 0.038 82); --warning-line: oklch(0.870 0.075 80); --danger: oklch(0.485 0.196 18); --danger-soft: oklch(0.958 0.028 18); --danger-line: oklch(0.860 0.060 18); --info: oklch(0.475 0.115 245); --info-soft: oklch(0.958 0.024 245); --info-line: oklch(0.862 0.050 245); --neutral-soft: oklch(0.950 0.003 45); --neutral-line: oklch(0.878 0.004 45); /* Categorical data viz — ordered for maximum adjacent separation. Never the only signal: charts also carry pattern, label or shape. */ --viz-1: oklch(0.600 0.170 41); /* ember */ --viz-2: oklch(0.480 0.105 240); /* petrol */ --viz-3: oklch(0.580 0.105 158); /* moss */ --viz-4: oklch(0.500 0.125 320); /* plum */ --viz-5: oklch(0.760 0.115 82); /* sand */ --viz-6: oklch(0.620 0.020 250); /* slate */ --viz-grid: oklch(0.918 0.004 45); --viz-axis: oklch(0.760 0.006 45); /* Focus */ --focus: oklch(0.52 0.172 41); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); --focus-ring-inset: inset 0 0 0 2px var(--focus); /* ---------------------------------------------------------------------- TYPOGRAPHY Display — Archivo, width axis pushed to 118% (broadcast title card) UI/body — Schibsted Grotesk (Norwegian newspaper grotesque) Mono — system stack, for IDs and codes only ---------------------------------------------------------------------- */ --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-ui: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* App scale — fixed rem, ratio ~1.2. Users view at consistent DPI. */ --fs-3xs: 0.6875rem; /* 11 — dense table meta, chart ticks */ --fs-2xs: 0.75rem; /* 12 — labels, badges */ --fs-xs: 0.8125rem; /* 13 — secondary UI */ --fs-sm: 0.875rem; /* 14 — dense body, table cells */ --fs-base: 0.9375rem; /* 15 — app body */ --fs-md: 1rem; /* 16 — prose, marketing body */ --fs-lg: 1.1875rem; /* 19 — card titles */ --fs-xl: 1.4375rem; /* 23 — page titles */ --fs-2xl: 1.75rem; /* 28 — section titles */ --fs-3xl: 2.125rem; /* 34 — hero metrics */ --fs-4xl: 2.625rem; /* 42 — big metrics */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.65; --ls-display: -0.025em; /* floor is -0.04em */ --ls-title: -0.014em; --ls-body: 0em; --ls-label: 0.01em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* ---------------------------------------------------------------------- SPACE — 4px base, varied for rhythm rather than uniform ---------------------------------------------------------------------- */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.25rem; /* 20 */ --s-6: 1.5rem; /* 24 */ --s-7: 2rem; /* 32 */ --s-8: 2.5rem; /* 40 */ --s-9: 3rem; /* 48 */ --s-10: 4rem; /* 64 */ --s-11: 5rem; /* 80 */ --s-12: 6.5rem; /* 104 */ /* ---------------------------------------------------------------------- RADIUS / ELEVATION Shadows are warm-tinted, matching the ink hue, so they read as light falling on the surface rather than a grey smudge. ---------------------------------------------------------------------- */ --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px; --r-full: 999px; --shadow-xs: 0 1px 2px oklch(0.185 0.012 45 / 0.06); --shadow-sm: 0 1px 2px oklch(0.185 0.012 45 / 0.05), 0 2px 6px oklch(0.185 0.012 45 / 0.05); --shadow-md: 0 2px 4px oklch(0.185 0.012 45 / 0.04), 0 6px 16px oklch(0.185 0.012 45 / 0.08); --shadow-lg: 0 4px 8px oklch(0.185 0.012 45 / 0.05), 0 16px 40px oklch(0.185 0.012 45 / 0.12); --shadow-xl: 0 8px 16px oklch(0.185 0.012 45 / 0.06), 0 32px 72px oklch(0.185 0.012 45 / 0.16); /* ---------------------------------------------------------------------- MOTION — custom curves; the CSS built-ins are too weak to read as intent ---------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --dur-press: 120ms; --dur-fast: 160ms; --dur: 200ms; --dur-panel: 260ms; --dur-slow: 400ms; /* ---------------------------------------------------------------------- Z-INDEX — semantic scale. No arbitrary 999. ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-drawer-backdrop: 300; --z-drawer: 310; --z-modal-backdrop: 400; --z-modal: 410; --z-toast: 500; --z-tooltip: 600; /* ---------------------------------------------------------------------- LAYOUT ---------------------------------------------------------------------- */ --sidebar-w: 252px; --sidebar-w-collapsed: 60px; --topbar-h: 56px; --rail-h: 48px; --content-max: 1440px; --prose-max: 68ch; --marketing-max: 1180px; } /* Lime is a highlighter, not a theme. This guard makes misuse visible in review. */ @supports (color: oklch(0 0 0)) { :root { --signal-usage-note: 'highlight only — keep under 5% of any screen'; } }