/* ========================================================================== tokens.css — the single source of design truth (v1.0.0) Custom properties only. No selectors with visual styling beyond :root maps. Cascade: load FIRST, before base/layout/components/utilities; theme.css after. Colour strategy (per brief): - Tight chromatic palette: 1 brand colour in 3 grades + 2 accents. - Neutrals are a functional grayscale underpinning (not counted as "colours"). - amber + red exist ONLY as semantic status (functional necessity). - P3 wide-gamut where it helps, with sRGB hex fallback via @supports. - HDR high-brightness boost for success / error / progress on capable panels. ========================================================================== */ :root { /* ----- RAW NEUTRAL SCALE (mode-independent reference values) ------------- Two ramps; semantic tokens below pick from them per theme. */ --n-0: #ffffff; --n-25: #f8f9fa; --n-50: #f1f2f4; --n-100: #e6e8eb; --n-200: #d4d7dc; --n-300: #b6bcc6; --n-400: #8a929e; --n-500: #5b6470; --n-600: #3a414c; --n-700: #262931; --n-800: #1e2026; --n-850: #16181c; --n-900: #0d0e11; --n-950: #08090b; /* ----- BRAND (orange) — 3 grades: soft / base / strong ------------------ The single chromatic accent. Norse Star reference: vivid orange used sparingly against black/white. sRGB fallbacks; P3 overrides further down. */ --brand-soft: #fef0e6; /* near-invisible tint surface (light theme) */ --brand: #f07028; /* primary action, active indicator, CTA */ --brand-strong: #c25500; /* hover / pressed / emphasis */ --brand-ink: #2d1200; /* text/icon on brand-soft */ /* ----- ACCENT A — aliases brand (same orange, one accent colour total) -- */ --accent-a: var(--brand); --accent-a-soft: var(--brand-soft); /* ----- ACCENT B (steel blue) — focus rings / links ONLY; never filled -- */ --accent-b: #5080d8; --accent-b-soft: #ebf0fa; /* ----- SEMANTIC STATUS — MUTED. Readable not alarming. ------------------ Think pipeline label strips, not traffic lights. Desaturated so they read as category markers against the neutral canvas, not emergencies. sRGB values; P3 overrides below maintain similar saturation (not lifted). */ --status-success: #4e8864; /* sage / forest green */ --status-warning: #b85c14; /* warm amber-orange — orange-toned, not brown */ --status-danger: #ac3e3a; /* terracotta / dusky red */ --status-info: var(--accent-b); /* soft backgrounds: near-invisible whisper tints — not coloured panels */ --status-success-soft: #ecf4ef; --status-warning-soft: #faeade; --status-danger-soft: #f5eaea; --status-info-soft: #ebf0fa; /* ----- SEMANTIC SURFACE / TEXT MAP (LIGHT theme defaults) ---------------- theme.css overrides these for dark + forces per [data-theme]. */ --color-bg: var(--n-25); --color-surface: var(--n-0); --color-surface-2: var(--n-50); --color-surface-inset: var(--n-50); --color-border: var(--n-100); --color-border-strong: var(--n-200); --color-text: #16181d; --color-text-muted: var(--n-500); --color-text-subtle: var(--n-400); --color-on-brand: #ffffff; --color-on-accent: #ffffff; --color-overlay: rgba(8, 9, 11, 0.45); --color-focus-ring: var(--accent-b); /* ----- ELEVATION (shadows tuned for light theme; theme.css softens dark) - */ --shadow-xs: 0 1px 2px rgba(16, 18, 22, 0.06); --shadow-sm: 0 1px 3px rgba(16, 18, 22, 0.08), 0 1px 2px rgba(16, 18, 22, 0.04); --shadow-md: 0 4px 12px rgba(16, 18, 22, 0.10), 0 2px 4px rgba(16, 18, 22, 0.06); --shadow-lg: 0 12px 32px rgba(16, 18, 22, 0.14), 0 4px 8px rgba(16, 18, 22, 0.06); --shadow-xl: 0 24px 64px rgba(16, 18, 22, 0.22); /* HDR glow tokens — applied ONLY to alert/toast icon badges (exclamation/check circles). All other elements use no glow. No-op by default; the dynamic-range media query below activates them on capable displays. */ --glow-success: 0 0 0 transparent; --glow-danger: 0 0 0 transparent; /* ----- TYPOGRAPHY -------------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.9375rem; /* 15 */ --fs-md: 1rem; /* 16 */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: 1.5rem; /* 24 */ --fs-2xl: 2rem; /* 32 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.55; --tracking-tight: -0.01em; --tracking-wide: 0.04em; /* ----- SPACING SCALE (4px base) ------------------------------------------ */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ /* ----- RADIUS ------------------------------------------------------------ */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; /* ----- BORDERS ----------------------------------------------------------- */ --border-width: 1px; /* ----- Z-INDEX LAYERS ---------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-sidebar: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* ----- MOTION ------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ----- CONTROL SIZING (touch-first: >=44px hit targets) ------------------ */ --control-h-sm: 36px; --control-h: 44px; /* default — meets touch target minimum */ --control-h-lg: 52px; --tap-min: 44px; /* minimum interactive square for coarse pointers */ --btn-pad-y: 0; --btn-pad-x: var(--space-5); --btn-radius: var(--radius-sm); --btn-font: var(--fw-semibold); --field-h: var(--control-h); --field-pad-x: var(--space-4); --field-radius: var(--radius-sm); /* ----- LAYOUT WIDTHS ----------------------------------------------------- */ --sidebar-w: 264px; --sidebar-w-rail: 72px; --container-max: 1200px; --container-narrow: 460px; /* login / focused modals */ /* ----- BREAKPOINTS (reference; media queries hardcode the px) ------------ --bp-sm 480px --bp-md 768px (tablet) --bp-lg 1024px (desktop) --bp-xl 1280px */ } /* ========================================================================== WIDE-GAMUT (P3) OVERRIDES — only the chromatic tokens benefit. Status colours stay proportionally muted even in P3 — same visual weight, wider gamut. Brand orange gets the P3 boost for vibrancy on capable screens. ========================================================================== */ @supports (color: color(display-p3 1 1 1)) { :root { --brand: color(display-p3 0.93 0.44 0.16); --brand-strong: color(display-p3 0.76 0.34 0.00); --accent-b: color(display-p3 0.33 0.50 0.85); /* status: same muted intent, just wider gamut */ --status-success: color(display-p3 0.32 0.54 0.40); --status-warning: color(display-p3 0.72 0.37 0.08); --status-danger: color(display-p3 0.67 0.25 0.23); } } /* ========================================================================== HDR HIGH-BRIGHTNESS BOOST — icon badges only. Status colours remain proportionally MUTED even on HDR displays (the design intent is calm, not alarming). Only the icon-badge glows activate. Brand orange gets a slight lift on HDR/P3 panels. ========================================================================== */ @media (dynamic-range: high) and (color-gamut: p3) { :root { /* Brand: slightly more vivid on HDR panels, still orange */ --brand: color(display-p3 0.98 0.46 0.16); /* Status: moderately lifted but still clearly muted vs brand */ --status-success: color(display-p3 0.38 0.62 0.46); --status-danger: color(display-p3 0.75 0.28 0.26); /* Icon-badge glows — the ONLY place HDR glow appears */ --glow-success: 0 0 12px color(display-p3 0.38 0.62 0.46 / 0.50); --glow-danger: 0 0 12px color(display-p3 0.75 0.28 0.26 / 0.50); } }