/* ============================================================================= HrChronicle — design tokens ("Harbor") Ported from design/prototypes/theme-directions.html (2026-07-21). The prototype's markup was throwaway; this file is the keeper. THREE TIERS, and the order matters: 1. PRIMITIVE --hrc-p-* Raw scales. Never referenced by a component. Referencing one from a component is a BUG. 2. SEMANTIC --hrc-* Meaning, not value. This is ALL a component may use. Theming rebinds this tier and nothing else. 3. COMPONENT --hrc--* Knobs a consumer may turn. Defined next to the component that owns them, defaulting to semantic. Light/dark uses the CSS `light-dark()` function against `color-scheme`, so every semantic token is declared exactly ONCE and still follows prefers-color-scheme, with `data-theme` on overriding in both directions. See §2. Never hard-code a colour, radius, spacing or row height in a component. If the value is not here, add it here. ============================================================================= */ /* ----------------------------------------------------------------------------- §1 PRIMITIVE TIER — raw scales, no meaning attached -------------------------------------------------------------------------- */ :root { /* -- neutral / harbor slate ------------------------------------------------ */ --hrc-p-white: #ffffff; --hrc-p-slate-25: #f6f8fd; --hrc-p-slate-50: #f4f6fb; --hrc-p-slate-75: #f4f7fd; --hrc-p-slate-100: #eef1f7; --hrc-p-slate-200: #e6eaf3; --hrc-p-slate-300: #d2d9e8; --hrc-p-slate-400: #8a93a9; --hrc-p-slate-500: #6f7a93; --hrc-p-slate-550: #4e576f; --hrc-p-slate-600: #a3adc4; --hrc-p-slate-650: #8e9ab5; --hrc-p-slate-700: #313d58; --hrc-p-slate-750: #242e45; --hrc-p-slate-800: #1e263a; --hrc-p-slate-825: #1a2237; --hrc-p-slate-850: #151c2e; --hrc-p-slate-875: #1c2438; --hrc-p-slate-900: #141b2d; --hrc-p-slate-950: #0d1220; --hrc-p-slate-975: #0b1024; --hrc-p-slate-050-ink: #e8ecf6; /* -- navy (the rail) ------------------------------------------------------- */ --hrc-p-navy-500: #22304f; --hrc-p-navy-600: #1f2c48; --hrc-p-navy-700: #152039; --hrc-p-navy-800: #1c2740; --hrc-p-navy-850: #182134; --hrc-p-navy-900: #0a0f1c; --hrc-p-navy-ink: #98a5c0; /* -- blue (accent) --------------------------------------------------------- */ --hrc-p-blue-100: #e9eefe; --hrc-p-blue-200: #ccd9fd; --hrc-p-blue-300: #9ab2ff; --hrc-p-blue-400: #7d9cff; --hrc-p-blue-500: #3b6cf6; --hrc-p-blue-600: #2f59d4; --hrc-p-blue-800: #2a3760; --hrc-p-blue-900: #1a2340; /* -- violet (admin variant accent) ---------------------------------------- */ /* Admin plane wears the violet accent to make it unambiguous that this is the platform-operator surface, not a tenant. The palette mirrors the blue scale one-for-one so the same semantic tokens can rebind cleanly on :root[data-variant="admin"] below (§3 admin re-binding block). */ --hrc-p-violet-100: #f2edff; --hrc-p-violet-200: #dcd0ff; --hrc-p-violet-300: #d68eff; --hrc-p-violet-400: #c26aff; --hrc-p-violet-500: #7239c4; --hrc-p-violet-600: #5c2ba0; --hrc-p-violet-800: #4b2c8a; --hrc-p-violet-900: #2a1a4d; --hrc-p-violet-on-dark: #1a0f2c; /* -- status ---------------------------------------------------------------- */ --hrc-p-green-300: #3fbf9b; --hrc-p-green-100: #e3f5f0; --hrc-p-green-600: #0d8a6a; --hrc-p-green-900: #0f2620; --hrc-p-amber-300: #dfa45c; --hrc-p-amber-100: #fdf3e3; --hrc-p-amber-600: #b06a00; --hrc-p-amber-900: #2a2013; --hrc-p-red-300: #ef7a6d; --hrc-p-red-100: #fdedeb; --hrc-p-red-600: #c33327; --hrc-p-red-900: #2d1719; /* -- spacing scale (rem, 1rem = 16px) -------------------------------------- */ --hrc-p-space-0: 0; --hrc-p-space-1: 0.25rem; --hrc-p-space-2: 0.5rem; --hrc-p-space-3: 0.75rem; --hrc-p-space-4: 1rem; --hrc-p-space-5: 1.25rem; --hrc-p-space-6: 1.5rem; --hrc-p-space-8: 2rem; --hrc-p-space-10: 2.5rem; --hrc-p-space-12: 3rem; --hrc-p-space-16: 4rem; /* -- radii ----------------------------------------------------------------- */ --hrc-p-radius-1: 7px; --hrc-p-radius-2: 10px; --hrc-p-radius-3: 14px; --hrc-p-radius-pill: 999px; /* -- type ------------------------------------------------------------------ */ /* IBM Plex Sans (+ Arabic) is the chosen face (OFL, self-hosted). The @font-face files are not vendored yet — the stack falls back to the system UI font until they land, so no layout depends on the download. Fonts are served as FILES, never inlined as data: URIs (that would force `font-src data:` for nothing). */ --hrc-p-font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hrc-p-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --hrc-p-text-xs: 0.75rem; --hrc-p-text-sm: 0.8125rem; --hrc-p-text-md: 0.875rem; --hrc-p-text-lg: 1rem; --hrc-p-text-xl: 1.25rem; --hrc-p-text-2xl: 1.5rem; --hrc-p-weight-regular: 400; --hrc-p-weight-medium: 500; --hrc-p-weight-semibold: 600; --hrc-p-leading-tight: 1.25; --hrc-p-leading-normal: 1.5; --hrc-p-leading-loose: 1.65; /* -- elevation & motion ---------------------------------------------------- */ --hrc-p-shadow-light: 0 1px 2px rgba(20, 27, 45, 0.04), 0 4px 14px rgba(20, 27, 45, 0.05); --hrc-p-shadow-dark: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.35); --hrc-p-shadow-pop-light: 0 16px 44px rgba(10, 16, 32, 0.22); --hrc-p-shadow-pop-dark: 0 20px 50px rgba(0, 0, 0, 0.6); --hrc-p-scrim-light: rgba(16, 22, 40, 0.42); --hrc-p-scrim-dark: rgba(4, 8, 18, 0.62); --hrc-p-duration-fast: 120ms; --hrc-p-duration-normal: 180ms; --hrc-p-ease: cubic-bezier(0.2, 0, 0.2, 1); /* -- z scale --------------------------------------------------------------- */ --hrc-p-z-sticky: 100; --hrc-p-z-rail: 200; --hrc-p-z-popover: 300; --hrc-p-z-dialog: 400; } /* ----------------------------------------------------------------------------- §2 THEME SWITCHING `color-scheme` is the single source of truth and `light-dark()` reads it, so each semantic token below is written once instead of once per theme. - default → `light dark`, i.e. follow the OS (prefers-color-scheme) - [data-theme=light] → pinned light, wins over a dark OS - [data-theme=dark] → pinned dark, wins over a light OS Setting `color-scheme` also fixes native form controls, scrollbars and the canvas background for free — a JS-free win we would otherwise have to fake. The attribute is written by wwwroot/js/theme.js from localStorage BEFORE first paint (the script is loaded in without `defer`), so there is no flash and no inline