/* ============================================================================= ERMS — Design Tokens (v3 — "Slate Sapphire") ============================================================================= Editorial Slate + Slate Sapphire. Professional operations-console aesthetic for a workforce-monitoring product — the palette of trustworthy, financial- grade B2B tools. Sapphire is the primary signal (primary actions, links, active nav); brass is the restrained secondary accent; a true green means "healthy / success" and is now DISTINCT from the brand (previously both were emerald, which read as "everything is green"); crimson is reserved for genuine criticals; amber for attention; cyan for informational. Sapphire was chosen over green deliberately: it is the trust/authority default for security tooling, it is neutral enough not to clash with a tenant's own brand colour (which overrides --s-brand-primary), and sapphire-on-white clears WCAG AA comfortably. WHITE-LABEL: --s-brand-primary is the PLATFORM default. Site.Master emits an inline :root override of --s-brand-primary with the tenant's own colour when one is set, so every tenant re-tints the whole shell without touching this file. This palette is only what un-branded tenants + the super_admin see. Light and dark modes are first-class — every semantic token has both. Init is FOUC-free via the inline script in Site.Master . Reads localStorage 's-theme' before paint; defaults to light. Bootstrap utilities still work because bootstrap-shim.css remaps --bs-* variables onto these tokens. No raw hex outside this file. ============================================================================= */ :root { /* ----- BRAND: Slate Sapphire ----- */ --s-brand-primary: #2F4A8C; /* sapphire — primary actions, links */ --s-brand-primary-hover: #3A5AA6; /* sapphire-light — hover */ --s-brand-primary-active: #1E2F5C; /* sapphire-deep — active / pressed */ --s-brand-primary-subtle: #E4E9F5; /* sapphire-50 — subtle backgrounds */ --s-brand-primary-ink: #182449; /* sapphire-950 — text on subtle */ --s-brand-primary-ring: color-mix(in oklab, #2F4A8C 32%, transparent); /* ----- SECONDARY: Brass (restrained accent) ----- */ --s-brass: #C9A24B; /* brass — spent once: primary-CTA hairline, active-nav rail */ --s-brass-hover: #B8912F; /* brass-dark */ --s-brass-subtle: #F6EFDC; /* brass-50 */ --s-brass-ink: #5C480E; /* brass-900 — text on brass-subtle */ /* Tenant brand override hook — emitted by Site.Master only when set */ --s-tenant-brand: var(--s-brand-primary); /* ----- SURFACE: Editorial Off-White ----- */ --s-bg: #FAFAF9; /* warm off-white page bg */ --s-bg-elevated: #F4F4F5; /* sticky-header / footer bg */ --s-surface: #FFFFFF; /* card / panel */ --s-surface-raised: #FFFFFF; /* nested / popover */ --s-surface-sunken: #F5F5F4; /* well / input bg */ --s-overlay: rgba(15, 23, 42, 0.55); /* ----- INK: Slate ----- */ --s-ink: #0F172A; /* slate-900 — primary text */ --s-ink-strong: #020617; /* slate-950 — headlines */ --s-ink-soft: #475569; /* slate-600 — secondary text */ --s-ink-muted: #94A3B8; /* slate-400 — tertiary */ --s-ink-faint: #CBD5E1; /* slate-300 — placeholders, disabled */ --s-ink-on-brand: #FFFFFF; /* text on emerald button */ /* ----- BORDERS ----- */ --s-border: #E2E8F0; /* slate-200 — default */ --s-border-strong: #CBD5E1; /* slate-300 — emphasized */ --s-border-soft: #F1F5F9; /* slate-100 — divider */ --s-border-focus: var(--s-brand-primary); /* ----- SEMANTIC: Success / Warning / Danger / Info ----- */ --s-green: #2E7D5B; /* forest-green — success (distinct from sapphire brand) */ --s-green-bg: #DEF0E7; /* green-50 */ --s-green-ink: #14432F; /* green-900 */ --s-green-ring: color-mix(in oklab, #2E7D5B 32%, transparent); --s-amber: #D97706; /* amber-600 — warning */ --s-amber-bg: #FEF3C7; /* amber-100 */ --s-amber-ink: #78350F; /* amber-900 */ --s-amber-ring: color-mix(in oklab, #D97706 32%, transparent); --s-red: #DC2626; /* red-600 — danger / critical */ --s-red-bg: #FEE2E2; /* red-100 */ --s-red-ink: #7F1D1D; /* red-900 */ --s-red-strong: #B91C1C; /* red-700 — destructive button */ --s-red-ring: color-mix(in oklab, #DC2626 32%, transparent); --s-cyan: #0891B2; /* cyan-600 — info */ --s-cyan-bg: #CFFAFE; /* cyan-100 */ --s-cyan-ink: #164E63; /* cyan-900 */ --s-cyan-ring: color-mix(in oklab, #0891B2 32%, transparent); --s-violet: #7C3AED; /* violet-600 — secondary accent */ --s-violet-bg: #EDE9FE; --s-violet-ink: #4C1D95; /* Aliases for "neutral" pill etc. */ --s-neutral: var(--s-ink-soft); --s-neutral-bg: var(--s-bg-elevated); --s-neutral-ink: var(--s-ink); /* ----- CHART palette (live-readable by chart-helper.js) ----- */ --s-chart-1: #2F4A8C; /* sapphire (brand) */ --s-chart-2: #0891B2; /* cyan */ --s-chart-3: #C9A24B; /* brass */ --s-chart-4: #DC2626; /* red */ --s-chart-5: #7C3AED; /* violet */ --s-chart-6: #475569; /* slate-600 */ --s-chart-grid: #E2E8F0; --s-chart-axis: #94A3B8; --s-chart-label: #475569; /* ----- TYPOGRAPHY ----- */ --s-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --s-font-display: 'Manrope', 'Inter', system-ui, sans-serif; --s-font-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type scale — 1.2 ratio, calibrated for density without crowding */ --s-text-xs: 11px; --s-text-sm: 12.5px; --s-text-base: 14px; --s-text-md: 15px; --s-text-lg: 18px; --s-text-xl: 22px; --s-text-2xl: 28px; --s-text-3xl: 36px; --s-text-4xl: 44px; --s-text-5xl: 56px; --s-tracking-tighter: -0.04em; --s-tracking-tight: -0.02em; --s-tracking-normal: 0; --s-tracking-wide: 0.03em; --s-tracking-eyebrow: 0.08em; --s-leading-tight: 1.15; --s-leading-snug: 1.35; --s-leading-normal: 1.55; --s-leading-relaxed: 1.7; --s-weight-regular: 400; --s-weight-medium: 500; --s-weight-semibold: 600; --s-weight-bold: 700; --s-weight-heavy: 800; /* ----- SPACING (4px grid) ----- */ --s-space-0: 0; --s-space-1: 4px; --s-space-2: 8px; --s-space-3: 12px; --s-space-4: 16px; --s-space-5: 20px; --s-space-6: 24px; --s-space-7: 28px; --s-space-8: 32px; --s-space-10: 40px; --s-space-12: 48px; --s-space-14: 56px; --s-space-16: 64px; --s-space-20: 80px; --s-space-24: 96px; /* ----- RADII ----- */ --s-radius-xs: 3px; --s-radius-sm: 5px; --s-radius-md: 7px; --s-radius-lg: 10px; --s-radius-xl: 14px; --s-radius-2xl: 18px; --s-radius-full: 9999px; /* ----- ELEVATION — subtle, prefers borders + tint ----- */ --s-shadow-none: none; --s-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --s-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --s-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --s-shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.06); --s-shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18); --s-shadow-focus: 0 0 0 3px var(--s-brand-primary-ring); /* ----- MOTION ----- */ --s-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --s-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --s-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --s-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --s-t-instant: 80ms; --s-t-fast: 140ms; --s-t-base: 200ms; --s-t-slow: 320ms; --s-t-deliberate: 480ms; /* ----- Z-LAYERS ----- */ --s-z-dropdown: 1020; --s-z-sticky: 1040; --s-z-overlay: 1050; --s-z-modal: 1060; --s-z-toast: 1080; /* ----- LAYOUT ----- */ --s-layout-max: 1440px; --s-layout-gutter: var(--s-space-6); --s-sidebar-w: 260px; --s-topbar-h: 60px; /* Inputs / form */ --s-input-h: 38px; --s-input-h-sm: 30px; --s-input-h-lg: 46px; --s-input-radius: var(--s-radius-md); /* ========================================================================= LEGACY ALIASES — redirects site.css's older token names to the new Sentinel Field palette. site.css was written when the brand was indigo (then dark slate) and uses --s-accent / --s-bg-soft / --s-muted etc. Without these aliases, those rules would break (--s-accent undefined), OR worse, fall back to site.css's own :root values from the older era. ========================================================================= */ --s-accent: var(--s-brand-primary); --s-accent-ink: var(--s-ink-on-brand); --s-accent-soft: var(--s-brand-primary-subtle); --s-bg-soft: var(--s-bg-elevated); --s-surface-2: var(--s-bg-elevated); --s-sidebar: var(--s-bg-elevated); --s-sidebar-hov: var(--s-surface); --s-sidebar-act: var(--s-brand-primary); --s-muted: var(--s-ink-muted); --s-muted-2: var(--s-ink-faint); --s-blue: var(--s-cyan); --s-blue-bg: var(--s-cyan-bg); --s-red-soft-bg: var(--s-red-bg); --s-radius: var(--s-radius-md); } /* ============================================================================= DARK MODE — :root[data-theme="dark"] overrides ============================================================================= Switched via Sentinel.theme.set('dark'). FOUC-prevention via inline script in . localStorage key: 's-theme'. System preference fallback also honoured on first visit (prefers-color-scheme: dark). ============================================================================= */ :root[data-theme="dark"] { /* BRAND lightens for legibility on deep slate */ --s-brand-primary: #7C96D6; /* sapphire-300 — legible on deep slate */ --s-brand-primary-hover: #9CB1E4; /* sapphire-200 */ --s-brand-primary-active: #C0CEF0; /* sapphire-100 */ --s-brand-primary-subtle: rgba(124, 150, 214, 0.16); --s-brand-primary-ink: #C0CEF0; --s-brand-primary-ring: color-mix(in oklab, #7C96D6 45%, transparent); /* SECONDARY: Brass — softened for dark ground */ --s-brass: #D9B563; /* brass-light */ --s-brass-hover: #E6C77E; --s-brass-subtle: rgba(201, 162, 75, 0.16); --s-brass-ink: #F0DCA6; /* SURFACE — deep slate with subtle stops */ --s-bg: #0A0E1A; /* near-black slate */ --s-bg-elevated: #0F1424; /* topbar / sticky */ --s-surface: #131A2C; /* card */ --s-surface-raised: #1A2238; /* popover / dropdown */ --s-surface-sunken: #0A0E1A; /* input bg */ --s-overlay: rgba(2, 6, 23, 0.75); /* INK — slate-50 down */ --s-ink: #F1F5F9; /* slate-100 */ --s-ink-strong: #FFFFFF; --s-ink-soft: #CBD5E1; /* slate-300 */ --s-ink-muted: #64748B; /* slate-500 */ --s-ink-faint: #334155; /* slate-700 */ --s-ink-on-brand: #0E1726; /* ink — high contrast on light sapphire-300 */ /* BORDERS */ --s-border: #1F2937; /* gray-800 */ --s-border-strong: #374151; /* gray-700 */ --s-border-soft: #111827; /* gray-900 */ --s-border-focus: var(--s-brand-primary); /* SEMANTIC — saturation kept high; backgrounds become tinted slabs */ --s-green: #4ADE9A; --s-green-bg: rgba(74, 222, 154, 0.12); --s-green-ink: #86EFC0; --s-green-ring: color-mix(in oklab, #4ADE9A 45%, transparent); --s-amber: #F59E0B; --s-amber-bg: rgba(245, 158, 11, 0.12); --s-amber-ink: #FCD34D; --s-amber-ring: color-mix(in oklab, #F59E0B 45%, transparent); --s-red: #F87171; --s-red-bg: rgba(248, 113, 113, 0.12); --s-red-ink: #FCA5A5; --s-red-strong: #EF4444; --s-red-ring: color-mix(in oklab, #F87171 45%, transparent); --s-cyan: #22D3EE; --s-cyan-bg: rgba(34, 211, 238, 0.12); --s-cyan-ink: #67E8F9; --s-cyan-ring: color-mix(in oklab, #22D3EE 45%, transparent); --s-violet: #A78BFA; --s-violet-bg: rgba(167, 139, 250, 0.14); --s-violet-ink: #C4B5FD; --s-neutral: var(--s-ink-soft); --s-neutral-bg: var(--s-surface-raised); --s-neutral-ink: var(--s-ink); /* CHART — dark-mode tuned */ --s-chart-1: #7C96D6; /* sapphire-300 */ --s-chart-2: #22D3EE; --s-chart-3: #D9B563; /* brass-light */ --s-chart-4: #F87171; --s-chart-5: #A78BFA; --s-chart-6: #94A3B8; --s-chart-grid: #1F2937; --s-chart-axis: #64748B; --s-chart-label: #CBD5E1; /* ELEVATION — true shadows are weaker in dark mode; we use stronger ones. */ --s-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --s-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.40); --s-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.45); --s-shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.55); --s-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.65); --s-shadow-focus: 0 0 0 3px var(--s-brand-primary-ring); } /* ============================================================================= BASE — body reset that everything inherits. ============================================================================= */ html, body { background: var(--s-bg); color: var(--s-ink); font-family: var(--s-font); font-size: var(--s-text-base); line-height: var(--s-leading-normal); font-feature-settings: 'cv11', 'ss01', 'ss03'; /* Inter — single-storey a, etc. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { /* Tabular figures by default — numeric columns align cleanly. */ font-variant-numeric: tabular-nums; } /* Display headings always use Manrope. */ h1, h2, h3, h4, h5, h6 { font-family: var(--s-font-display); letter-spacing: var(--s-tracking-tight); color: var(--s-ink-strong); } a { color: var(--s-brand-primary); text-decoration: none; transition: color var(--s-t-fast) var(--s-ease-out); } a:hover { color: var(--s-brand-primary-hover); } a:focus-visible { outline: none; box-shadow: var(--s-shadow-focus); border-radius: var(--s-radius-xs); } ::selection { background: var(--s-brand-primary-subtle); color: var(--s-brand-primary-ink); } :root[data-theme="dark"] ::selection { background: rgba(124, 150, 214, 0.3); color: #F1F5F9; } /* Scrollbar — slim, themed */ * { scrollbar-color: var(--s-ink-faint) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--s-ink-faint); border-radius: var(--s-radius-full); border: 2px solid var(--s-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--s-ink-muted); } /* Reduced-motion respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }