/* Scott Operations design tokens — v1.0 * * Source of truth: BRAND.md §2-§5. * Every color, spacing value, radius, shadow, typography rule lives here. * * Rules (BRAND.md §13): * - Never hardcode colors elsewhere. Use var(--scott-*). * - Never hardcode spacing. Use var(--scott-space-*). * - Never introduce a second typeface beyond Inter / JetBrains Mono. * * Apps with strong themes (e.g. sr-pulse dark navy) override individual * tokens via a child :root scope. Don't fork this file. */ :root, :root[data-theme="light"], .keep-light { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ── Primary Scott family color (BRAND.md §2) ─────────────────── */ --scott-primary: #1E3A5F; /* Deep navy — anchors all Scott identity */ --scott-primary-hover: #15294A; /* Darker for hover/active */ --scott-primary-light: #E8EEF5; /* Tint for backgrounds, badges */ /* ── Business accent colors ───────────────────────────────────── */ /* Used sparingly: hero sections, business badges, division indicators. * Never primary buttons, never primary nav, never logos. * Primary navy stays primary always. */ --scott-recycling: #2D7A3E; /* Deep forest green */ --scott-recycling-light: #E6F0E8; /* ── Neutrals: moved to the light-surface block below (2965) so the * .keep-light opt-out can re-declare them. ─────────────────────── */ /* ── Semantic colors ──────────────────────────────────────────── */ --scott-success: #2D7A3E; /* Same as Recycling — "good" reads green */ --scott-warning: #C9941A; /* Amber */ --scott-error: #B33A3A; /* Restrained red, not panic-button */ --scott-error-hover: #8E2E2E; /* Darker red for destructive button hover */ --scott-info: #1E3A5F; /* Navy carries info */ --scott-success-light: #E6F0E8; --scott-warning-light: #F8EFD8; --scott-error-light: #F1DCDC; --scott-info-light: #E8EEF5; /* ── Typography (BRAND.md §3) ─────────────────────────────────── */ --scott-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --scott-font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', monospace; /* Type scale */ --scott-text-xs: 12px; /* Helper text, captions, badges */ --scott-text-sm: 14px; /* Secondary text, table rows */ --scott-text-base: 16px; /* Body */ --scott-text-lg: 18px; /* Emphasized body, large form labels */ --scott-text-xl: 20px; /* Card titles, section subheadings */ --scott-text-2xl: 24px; /* Section headings */ --scott-text-3xl: 30px; /* Page titles */ --scott-text-4xl: 36px; /* Hero headlines on public sites only */ /* Line heights */ --scott-line-body: 1.5; --scott-line-heading: 1.25; /* Weights — stay in 400/500/600/700, no 300/800/900 */ --scott-weight-regular: 400; --scott-weight-medium: 500; --scott-weight-semibold: 600; --scott-weight-bold: 700; /* ── Spacing — 8-point grid (BRAND.md §4) ─────────────────────── */ /* Every spacing value must be one of these. No exceptions. */ --scott-space-1: 4px; --scott-space-2: 8px; --scott-space-3: 12px; --scott-space-4: 16px; --scott-space-6: 24px; --scott-space-8: 32px; --scott-space-12: 48px; --scott-space-16: 64px; --scott-space-24: 96px; /* ── Layout primitives (BRAND.md §5) ──────────────────────────── */ --scott-radius-sm: 4px; /* Inputs, buttons */ --scott-radius-md: 8px; /* Cards, modals, alerts */ --scott-radius-lg: 12px; /* Tiles, dashboard cards */ --scott-radius-full: 9999px; /* Pills, avatars */ --scott-shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.05); --scott-shadow-md: 0 4px 6px -1px rgba(15, 20, 25, 0.08), 0 2px 4px -1px rgba(15, 20, 25, 0.04); --scott-shadow-lg: 0 10px 15px -3px rgba(15, 20, 25, 0.08), 0 4px 6px -2px rgba(15, 20, 25, 0.03); --scott-container-max: 1280px; --scott-sidebar-width: 240px; --scott-sidebar-collapsed: 64px; --scott-navbar-height: 56px; --scott-breakpoint-sm: 640px; --scott-breakpoint-md: 768px; --scott-breakpoint-lg: 1024px; --scott-breakpoint-xl: 1280px; /* ── Transitions ──────────────────────────────────────────────── */ --scott-transition-fast: 120ms ease; --scott-transition: 180ms ease; --scott-transition-slow: 280ms ease; /* ── Focus ring (accessibility, BRAND.md §12) ─────────────────── */ --scott-focus-ring: 0 0 0 2px var(--scott-primary); /* ── On-color text tokens (v0.87.0 — light/dark button visibility fix) ── * The text color that sits ON a solid brand-colored button (navy primary, * red destructive) or the brand-navy navbar. Brand surfaces keep their * solid fill in BOTH themes, so their label must stay LIGHT in both themes. * * Bug this fixes: .scott-btn--primary / --destructive (and the .scott-navbar * links + .scott-skip-link) previously used color: var(--scott-surface) for * their label. --scott-surface is a SURFACE token that intentionally flips * to dark slate (#1e293b) in dark mode, so the label turned dark-on-navy / * dark-on-red and went invisible until the user toggled back to light. * These on-* tokens are mode-stable (NOT overridden in the * [data-theme="dark"] block) so the label stays legible without a toggle. * * Dark-legible brand text for OUTLINE buttons (brand text on a flipping * surface, e.g. .scott-btn--secondary) — light blue that reads on the dark * card surface. Mirrors scott_common.css's content-link dark color. */ --scott-on-primary: #FFFFFF; /* label on navy primary fill — both modes */ --scott-on-error: #FFFFFF; /* label on red destructive fill — both modes */ --scott-link-dark: #93c5fd; /* dark-mode brand/link text on dark surfaces */ --scott-link-dark-hover: #bfdbfe; } /* ── Light surface + text tokens (2965: also re-declared by .keep-light) ── * Every neutral surface/text/border token the shell paints with. The * selector list carries `.keep-light`, so an element with that class gets * the LIGHT values back even inside a dark page: a printed-document preview * (certificate, label, statement) stays paper-white with dark ink, and every * rule that paints with these tokens (cards, list groups, tables, the 2965 * Bootstrap `.bg-white` / `.bg-light` remap, the Tailwind neutral remap) * follows automatically. Brand tokens (--scott-primary …) stay in :root * above, so an app's own brand colours are not reset inside .keep-light. * Keep literals here — never in the rules. */ :root, .keep-light { --scott-ink: #0F1419; /* Body text, headings */ --scott-ink-secondary: #3D4852; /* Secondary text */ --scott-muted: #6B7785; /* Helper text, captions, disabled */ --scott-border: #D4DAE0; /* Borders, dividers */ --scott-border-strong: #94A3B8; /* Stronger edge for form inputs (~3:1 on white) — 890 */ --scott-surface-tint: #F5F7FA; /* Table stripes, subtle background */ --scott-surface: #FFFFFF; /* Primary background */ /* ── Shell content tokens (v0.56.3, dark-mode coverage) ─────────── * These short-name tokens drive the body + cards + tables + forms in * the unified shell (scott_common/shell/_shell.html). They were * historically defined ONLY in each consumer app's theme.css; this * meant apps WITHOUT a theme.css (sr-plastics, sr-trucking on first * v0.55 adoption) got a broken white content area in dark mode. * * Defaults below match SR-2's slate palette so the design target is * preserved fleet-wide. Consumer theme.css can still override via * brand.shell_css (loaded AFTER scott_common shell.css per * _shell.html ordering). */ --bg: #f1f5f9; /* slate-100 — body background */ --card-bg: #ffffff; --card-border: #e2e8f0; /* slate-200 */ --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 6px -2px rgba(0,0,0,.04); /* v0.78.0 polish — lift on hover + a barely-there brand wash behind the main content so white cards read as floating instead of flat-on-flat. Two faint radial tints: navy top-left, recycling green bottom-right. */ --card-shadow-hover: 0 10px 24px -6px rgba(15,20,25,.14), 0 4px 10px -4px rgba(15,20,25,.07); --backdrop-wash: radial-gradient(1100px 560px at 0% 0%, rgba(30,58,95,.05), transparent 60%), radial-gradient(950px 680px at 100% 100%, rgba(45,122,62,.045), transparent 55%); --text: #0f172a; /* slate-900 */ --text-muted: #64748b; /* slate-500 */ --text-soft: #334155; /* slate-700 */ --input-bg: #ffffff; --input-border: #cbd5e1; --input-text: #0f172a; --input-placeholder: #94a3b8; --input-focus: #93c5fd; --nav-bg: #0b1220; --nav-text: #f1f5f9; /* ── Scott surface aliases for dark theming ───────────────────── * Used by scott_common.css Bootstrap overrides + future components * that want a tokenized raised surface above the main bg. */ --scott-surface-2: #f8fafc; /* slightly lifted off card-bg */ --scott-card-bg: var(--card-bg); /* alias for callers preferring the scott- prefix */ --scott-bg: var(--bg); --scott-text: var(--text); } /* ── Dark theme — full content coverage (v0.56.3) ──────────────────── * Activated by the no-flash bootstrap in _shell.html setting * data-theme="dark" on . Mirrors SR-2's theme.css dark palette. * * Any app extending scott_common/shell/_shell.html (directly or via * scott_common/base.html shim) inherits dark mode here — no per-app * theme.css required. */ [data-theme="dark"] { --bg: #0f172a; /* slate-900 */ --card-bg: #1e293b; /* slate-800 */ --card-border: #334155; /* slate-700 */ --card-shadow: 0 1px 3px rgba(0,0,0,.30), 0 4px 6px -2px rgba(0,0,0,.20); --card-shadow-hover: 0 14px 30px -8px rgba(0,0,0,.55), 0 6px 14px -6px rgba(0,0,0,.4); --backdrop-wash: none; /* deep slate bg already carries depth in dark */ --text: #f1f5f9; --text-muted: #94a3b8; --text-soft: #cbd5e1; --input-bg: #0f172a; --input-border: #334155; --input-text: #f1f5f9; --input-placeholder: #64748b; --input-focus: #3b82f6; /* Scott neutrals — flip light defaults to dark equivalents so any * component using var(--scott-surface)/var(--scott-ink) doesn't read * white-on-white in dark mode. Semantic colors (success/warning/error) * keep their meaning and stay light-mode chroma. */ --scott-surface: #1e293b; --scott-surface-tint: #0f172a; --scott-surface-2: #273548; --scott-ink: #f1f5f9; --scott-ink-secondary:#cbd5e1; --scott-muted: #94a3b8; --scott-border: #334155; --scott-border-strong:#64748B; /* stronger edge for inputs on dark surface — 890 */ --scott-card-bg: var(--card-bg); --scott-bg: var(--bg); --scott-text: var(--text); } /* ── Bootstrap text variables follow the theme (2965) ───────────────── * Bootstrap 5.3 only flips its own palette under [data-bs-theme="dark"], * which the shell never sets, so in our dark mode `.text-muted`, * `.text-body-secondary`, `.form-text`, `.breadcrumb-item` … painted * Bootstrap's light-mode greys (#212529bf / #6c757d) on the dark card * (1.05:1 – 3.1:1). Point the variables at the shell tokens instead. * Re-declared on .keep-light because a var() resolves where it is declared: * inside a light island the tokens are the light ones again. * Screen only: printed output keeps its pre-2965 colours. */ @media screen { [data-theme="dark"], [data-theme="dark"] .keep-light { --bs-body-color: var(--text); --bs-emphasis-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-tertiary-color: var(--text-muted); --bs-border-color: var(--card-border); } } /* 6617 — approved Help Center mock-up palette. */ :root {--help-bg:#f3f5f7;--help-card:#fff;--help-panel:#f6f8fa;--help-ink:#0F1419;--help-ink-2:#3D4852;--help-muted:#5d6874;--help-line:#d4dae0;--help-navy:#1E3A5F;--help-accent:#0E7C8E;--help-accent-soft:#e2f2f4;--help-new:#7a4fb5;--help-new-soft:#f1eafa;--help-warn:#9a5b00;--help-warn-soft:#fbefd9;--help-ok:#2D7A3E;--help-ok-soft:#e6f0e8;--help-on-navy:#fff;--help-video:#a3343c;--help-video-soft:#fde8e8;--help-page:#1E5FA8;--help-page-soft:#e3edf8;--help-button-line:#9aa5b1} :root[data-theme="dark"] {--help-bg:#0f1419;--help-card:#19212a;--help-panel:#1f2832;--help-ink:#e8edf2;--help-ink-2:#c3ccd5;--help-muted:#95a1ad;--help-line:#2e3945;--help-navy:#8fb3dd;--help-accent:#5FB4C5;--help-accent-soft:#16343a;--help-new:#c4a6ef;--help-new-soft:#2a2238;--help-warn:#e8b85a;--help-warn-soft:#33291a;--help-ok:#79c08a;--help-ok-soft:#1b3323;--help-on-navy:#0f1419;--help-video:#f5a4ac;--help-video-soft:#3b2327;--help-page:#8fb3dd;--help-page-soft:#1e3048;--help-button-line:#95a1ad}