/* ========================================================================== SK Auto Hub — Design Tokens ========================================================================== Single source of truth for spacing, radius, shadow, motion, typography, and color across the whole platform (public site, admin dashboard, ownershipiq, platform_mgmt). This file is pure addition — it does not override any existing rule in style.css. Load it BEFORE style.css's own :root block has no dependency on it, so load order relative to style.css does not matter, but by convention it is linked first (see base.html / base_admin.html). THEME MODEL — "shared system, two themes": :root → public site defaults. --accent-color/--accent-dark/ --dark-bg/--navbar-bg/--btn-text are CMS-editable and re-injected per-request by base.html (unchanged mechanism, see templates/base.html). Everything else here is a static default. .admin-body → admin dashboard scope. Every admin page (core admin, ownershipiq, platform_mgmt) extends base_admin.html, whose already carries this class, so the override below applies automatically with no per-template change required. Components in design-system.css are written against the SEMANTIC ALIASES (--brand, --surface, --bg-page, --text-primary, --border-color, --status-*) rather than raw colors, so the same component markup renders correctly in both theme scopes. ========================================================================== */ :root { /* ---- Spacing scale — 4px rhythm, matches the 4/8/12/16/20/24 pattern already used throughout style.css and base_admin.html ---- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; /* ---- Radius scale — consolidates the ad-hoc 4/8/9/10/12/14/20/999px values found scattered across style.css and ownershipiq.css ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 20px; --radius-pill: 999px; /* ---- Shadow scale — consolidates bespoke rgba/blur combinations ---- */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --shadow-md: 0 4px 12px rgba(16, 24, 40, .08); --shadow-lg: 0 8px 24px rgba(16, 24, 40, .12); --shadow-xl: 0 16px 40px rgba(16, 24, 40, .16); /* ---- Motion — consolidates the 0.1s-0.3s scatter found across style.css / base_admin.html into three named steps ---- */ --duration-fast: 0.15s; --duration-base: 0.2s; --duration-slow: 0.3s; --ease-standard: cubic-bezier(.4, 0, .2, 1); /* ---- Type scale ---- */ --font-size-xs: .75rem; /* 12px */ --font-size-sm: .8125rem; /* 13px */ --font-size-base: .875rem; /* 14px — Bootstrap's own base */ --font-size-md: .95rem; /* 15.2px */ --font-size-lg: 1rem; /* 16px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ --font-size-4xl: 2.5rem; /* 40px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --line-height-tight: 1.2; --line-height-base: 1.5; /* ---- Breakpoints ---- CSS custom properties cannot be read inside @media conditions, so this is documentation, not a live token: every new @media rule should use these exact px values (Bootstrap 5 defaults). This replaces the 767px / 767.98px / 768px inconsistency found in style.css, all of which were used to mean the same "mobile" breakpoint. --bp-sm: 576px --bp-md: 768px --bp-lg: 992px --bp-xl: 1200px --bp-xxl: 1400px */ /* ---- Z-index scale ---- */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; /* ---- Shared semantic status colors ---- Used identically by badges/pills/alerts in BOTH themes. This is the canonical status → color mapping: new pages should follow it exactly. (The audit that produced this system found the same status word, e.g. "Sold", mapped to different pill colors on different admin pages — this table is the fix going forward.) success → live / available / active / approved / paid danger → sold / inactive / rejected / critical / overdue warning → pending / reserved / in-progress / due-soon info → informational / new / misc neutral → draft / archived / disabled ---- */ --status-success: #198754; --status-success-dark: #146c43; --status-success-light: #e8f5e9; --status-danger: #dc3545; --status-danger-dark: #c62828; --status-danger-light: #fdecea; --status-warning: #b5800e; --status-warning-dark: #8a6209; --status-warning-light: #fff6e5; --status-info: #1a56db; --status-info-dark: #123f9e; --status-info-light: #e8f0fe; --status-neutral: #5a5a72; --status-neutral-dark: #3a3a4a; --status-neutral-light: #f5f6fa; /* ---- Public site theme scope (default) ---- --accent-color / --accent-dark / --dark-bg / --navbar-bg / --btn-text are CMS-editable per dealer and re-injected per-request in templates/base.html. The values below are only the fallback defaults (unchanged from static/css/style.css). ---- */ --accent-color: #2ecc40; --accent-dark: #27ae36; --accent-text: #1a7a29; /* darkened for WCAG AA on white */ --dark-bg: #1a1a2e; --navbar-bg: #ffffff; --btn-text: #ffffff; /* ---- Semantic aliases — design-system.css components are built on these, not on raw colors, so the same markup re-skins automatically between the public site and the admin dashboard. ---- */ --brand: var(--accent-color); --brand-dark: var(--accent-dark); --brand-text: var(--accent-text); --surface: #ffffff; --bg-page: #f7f8fa; --text-primary: #1a1a2e; --text-muted: #5a5a72; --border-color: #e8e8e8; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ========================================================================== Admin theme scope — dashboard, ownershipiq, platform_mgmt. All admin pages extend base_admin.html, whose already carries this class, so this applies platform-wide automatically. The --sk-* admin brand palette itself is already defined at :root in static/css/style.css (line ~2285) — kept there as the single source of truth to avoid a second place values can drift out of sync. This block only re-points the shared semantic aliases to that palette. ========================================================================== */ .admin-body { --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --brand: var(--sk-green); --brand-dark: var(--sk-green-dark); --brand-text: var(--sk-green-dark); --surface: #ffffff; --bg-page: #f5f6fa; --text-primary: var(--sk-gray-900); --text-muted: var(--sk-gray-600); --border-color: var(--sk-gray-200); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.001ms; --duration-base: 0.001ms; --duration-slow: 0.001ms; } }