/* 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 { /* ── 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 ─────────────────────────────────────────────────── */ --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-surface-tint: #F5F7FA; /* Table stripes, subtle background */ --scott-surface: #FFFFFF; /* Primary background */ /* ── 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); /* ── 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); --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); --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-card-bg: var(--card-bg); --scott-bg: var(--bg); --scott-text: var(--text); }