/* ========================================================================= #SamY 2026 — DESIGN SYSTEM FOUNDATION (v3 — M1 wiring) ------------------------------------------------------------------------- Single source of truth for the UI overhaul. Refinement over decoration. References: Apple · Linear · Vercel · Notion (for restraint, not looks). M1 SCOPE = colour system only (atomic). Geometry tokens (radius, spacing, type sizes, shadows, motion) are DEFINED here but NOT yet adopted by components — they stay on the legacy `--qs-*` values until a later phase verifies no layout shift. Auto dark (prefers-color-scheme) is intentionally DEFERRED: dark applies only via an explicit [data-theme="dark"] opt-in, so the theme-engine-less admin panel keeps its current light appearance. COLOUR MIGRATION MAP (old → new), applied atomically in M1: --qs-primary → --accent --qs-primary-600 → --accent-hover --qs-secondary → --text-strong --qs-text → --text --qs-muted → --text-muted --qs-bg → --bg --qs-card → --surface --qs-surface-2 → --surface-2 --qs-input-bg → --input-bg --qs-border → --border --qs-border-strong → --border-strong --qs-nav-bg → --surface-glass --qs-accent(green) → --success-fill --qs-danger → --danger-fill Geometry (LATER phases): --qs-radius* → --radius-* | --qs-shadow* → --e* | --qs-ease → --ease-* | --qs-gap/pad/space → --sp-* | --qs-font → --font-sans --qs-tap → --tap | --qs-safe-* → --safe-* | --qs-container → --container ========================================================================= */ :root{ /* 1 — SPACING (4px base) — defined; adopted in a later phase */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-14:56px; --sp-18:72px; /* 2 — RADIUS (capped at 16px) — later phase */ --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px; /* 3 — ELEVATION (three subtle levels) — later phase */ --e1:0 1px 2px rgba(16,24,40,.06); --e2:0 4px 12px rgba(16,24,40,.08); --e3:0 12px 28px rgba(16,24,40,.14); /* 4 — MOTION (≤260ms) — later phase */ --dur-fast:120ms; --dur-base:180ms; --dur-slow:260ms; --ease-out:cubic-bezier(.2,0,0,1); --ease-move:cubic-bezier(.4,0,.2,1); --ease-confirm:cubic-bezier(.2,.7,.3,1); /* 5 — ICON SIZING — later phase */ --icon-sm:16px; --icon-md:18px; --icon-lg:20px; --icon-xl:24px; /* 6 — TYPOGRAPHY (headings fluid; two small tiers) — later phase */ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif; --fs-display:clamp(28px,5vw,44px); --fs-h1:clamp(23px,3.2vw,30px); --fs-h2:clamp(20px,2.4vw,24px); --fs-h3:19px; --fs-h4:16px; --fs-body:clamp(15px,2.6vw,16px); --fs-caption:13px; --fs-micro:12px; --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.5; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --tracking-label:.05em; /* 8 — STRUCTURAL (kept) — later phase */ --tap:44px; --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --container:1200px; --container-wide:1320px; /* ===================================================================== 7 — COLOUR (ACTIVE IN M1) — LIGHT ===================================================================== */ --bg:#f5f5f7; --surface:#ffffff; --surface-2:#fafafb; --input-bg:#ffffff; --surface-glass:rgba(255,255,255,.82); /* nav / fixed bar ONLY */ --text:#1d1d1f; --text-strong:#1d1d1f; /* admin-configurable heading/brand text (was --qs-secondary) */ --text-muted:#636368; /* muted/secondary — AA: 5.97 / surface, 5.49 / bg */ --border:#e5e5ea; --border-strong:#d2d2d7; /* Accent — the ONE brand colour (admin-configurable at runtime) */ --accent:#0071e3; --accent-hover:#005bbf; --accent-soft:rgba(0,113,227,.10); --focus-ring:rgba(0,113,227,.45); /* Semantic status — each: text (AA on -soft) · soft (tint) · fill (solid). --success-fill stays runtime-configurable (legacy admin "accent" colour). */ --success:#15722f; --success-soft:#e2f5e9; --success-fill:#34c759; --warning:#8a4f00; --warning-soft:#fff4e0; --warning-fill:#ff9f0a; --danger:#c8102e; --danger-soft:#ffe5e2; --danger-fill:#ff3b30; --info:#0063c7; --info-soft:#e8f1fd; --info-fill:#0a84ff; /* Disabled — token-driven, never global opacity */ --disabled-surface:#ececed; --disabled-text:#9a9aa0; --disabled-border:#e0e0e4; } /* DARK — explicit opt-in only (theme picker sets data-theme="dark"). In dark, card boundaries lean on surface elevation, not border contrast. */ :root[data-theme="dark"]{ --e1:0 1px 2px rgba(0,0,0,.5); --e2:0 6px 16px rgba(0,0,0,.5); --e3:0 16px 34px rgba(0,0,0,.6); --bg:#000000; --surface:#1c1c1e; --surface-2:#161618; --input-bg:#2c2c2e; --surface-glass:rgba(28,28,30,.82); --text:#f5f5f7; --text-strong:#f5f5f7; --text-muted:#9a9aa0; --border:#2c2c2e; --border-strong:#3a3a3c; --accent:#0a84ff; --accent-hover:#409cff; --accent-soft:rgba(10,132,255,.16); --focus-ring:rgba(10,132,255,.55); --success:#30d158; --success-soft:rgba(48,209,88,.16); --success-fill:#30d158; --warning:#ff9f0a; --warning-soft:rgba(255,159,10,.16); --warning-fill:#ff9f0a; --danger:#ff453a; --danger-soft:rgba(255,69,58,.18); --danger-fill:#ff453a; --info:#409cff; --info-soft:rgba(10,132,255,.18); --info-fill:#0a84ff; --disabled-surface:#2a2a2c; --disabled-text:#6a6a6e; --disabled-border:#2c2c2e; } /* Accent-derived tints/hover follow the runtime --accent (set by the theme engine on public pages and by the admin colour inline) in EVERY theme. The fixed rgba/hex values above remain as fallbacks for pre-color-mix browsers. Light darkens the accent on hover; dark lightens it. */ @supports (color: color-mix(in srgb, red, blue)){ :root{ --accent-hover:color-mix(in srgb, var(--accent), #000 14%); --accent-soft:color-mix(in srgb, var(--accent) 12%, transparent); --focus-ring:color-mix(in srgb, var(--accent) 45%, transparent); } :root[data-theme="dark"]{ --accent-hover:color-mix(in srgb, var(--accent), #fff 22%); --accent-soft:color-mix(in srgb, var(--accent) 16%, transparent); --focus-ring:color-mix(in srgb, var(--accent) 55%, transparent); } } /* Motion honours user preference (applies once components adopt --dur-*). */ @media (prefers-reduced-motion:reduce){ :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; } }