/* ============================================================================ tokens.css — Design tokens for the ScaleFast web platform (Indigo direction) ---------------------------------------------------------------------------- Load order: tokens.css → style.css → components.css ---------------------------------------------------------------------------- This file ADDS a semantic token layer on top of the raw palette that already lives in style.css (:root + body.light-theme). It does NOT redefine the existing raw variables (--bg-primary, --accent-primary, …) — those keep their values and remain valid. IMPORTANT — scoping: the theme class lives on (body.light-theme), not on /:root. A token defined as `--surface: var(--bg-secondary)` resolves its inner var() in the scope where it is DECLARED. Declared on :root (=, the parent of ), it would capture the *dark* --bg-secondary because the body.light-theme override never reaches :root. Therefore every colour token that aliases a theme-switched raw var — or that itself differs between themes — is declared on `body`, so its var() resolves in the body scope and follows the light override. Purely structural, theme-independent scales stay on :root. ============================================================================ */ /* ---- Theme-independent scales (safe on :root) ---- */ :root { /* Spacing scale (4 / 8 base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 11px; --text-sm: 12px; --text-base:13px; /* compact data-dense default */ --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-normal: 1.5; /* Radii (base --radius-sm/md/lg/xl from style.css) + extras */ --radius-xs: 5px; --radius-full: 999px; /* z-index scale (rationalises the ad-hoc values found in audit) */ --z-base: 1; --z-sticky: 10; /* sticky table headers / totals rows */ --z-header: 50; /* sticky page header bar */ --z-dropdown: 100; /* toolbar dropdowns / autocomplete */ --z-sidebar: 200; /* fixed sidebar */ --z-sidebar-toggle: 250; --z-overlay: 900; /* fullscreen table / dim backdrops */ --z-modal: 1000; /* modal dialogs */ --z-popover: 1200; /* date / filter / metrics popovers */ --z-toast: 2000; /* toast notifications */ --z-loader: 9000; /* full-page loader / resize guide */ --z-banner: 9100; /* token-expired / critical banners */ /* Touch / adaptive */ --tap-min: 44px; /* min touch target */ --control-h: 32px; /* control height (desktop / fine pointer) */ --control-h-touch: 40px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.12s; --dur: 0.18s; } /* ---- Colour tokens: declared on body so var() aliases resolve in the body scope and follow the body.light-theme overrides. Dark = default. ---- */ body { /* Surfaces / layers (TZ names → existing raw vars) */ --bg: var(--bg-primary); --surface: var(--bg-secondary); --surface-2: var(--bg-elevated); --surface-hover: var(--bg-hover); --surface-active:var(--bg-active); --border: var(--border-color); --border-strong: var(--border-hover); /* Text — 3 levels mapped onto the raw trio (primary/secondary/muted). --text-subtle is a literal (= raw --text-muted value) to avoid shadowing --text-muted, which we redefine to the secondary level just above it. */ --text: var(--text-primary); --text-muted: var(--text-secondary); --text-subtle: #71717a; /* Accent (Indigo) */ --accent: var(--accent-primary); /* #6366f1 */ --accent-hover: #818cf8; --accent-contrast: #ffffff; /* --accent-gradient, --accent-glow already defined in style.css */ /* Semantic status — solid + soft-bg come from style.css; add hovers + neutral */ --success: #22c55e; --success-hover: #16a34a; /* --success-bg from style.css */ --danger: var(--error); /* TZ uses "danger" */ --danger-bg: var(--error-bg); --danger-hover: #dc2626; --warning-hover: #d97706; --info-hover: #2563eb; --neutral: #8f8f9c; /* CONTINUE / SKIP / "other" */ --neutral-bg: rgba(150, 150, 165, 0.15); /* Elevation extra (base --shadow-* from style.css) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); } /* Light theme: only the colour tokens that must differ from dark. (Raw --bg-*/--text-*/--border-*/--shadow-* light overrides live in style.css under body.light-theme; the aliases above pick them up automatically.) */ body.light-theme { --accent: #5457e0; --accent-hover: #4649cf; /* --text-muted re-asserted below with html-prefixed specificity because style.css `body.light-theme { --text-muted: #6b7280 }` would otherwise out-specify the `body` alias and break the 3-level text scale in light. */ --success: #16a34a; --success-hover: #15803d; --danger-hover: #b91c1c; --warning-hover: #b45309; --info-hover: #1d4ed8; --neutral: #6b7080; --neutral-bg: rgba(107, 112, 128, 0.12); --shadow-xs: 0 1px 2px rgba(30, 30, 70, 0.06); --text-subtle: #6b7280; /* matches style.css light --text-muted */ } /* Higher specificity than style.css `body.light-theme` (0,1,1) so our secondary-level --text-muted holds in light mode too. */ html body.light-theme { --text-muted: var(--text-secondary); } html body { --text-muted: var(--text-secondary); } /* ---------------------------------------------------------------------------- Adaptive breakpoints — for reference (CSS custom properties can't be used inside @media queries, so these are documented here and used as literals): 1194px iPad Pro landscape / narrow desktop boundary 1024px iPad portrait / small laptop (existing sidebar → off-canvas here) 768px phone landscape / small tablet 480px iPhone portrait Rule of thumb: > 1194 desktop · 768–1194 tablet · < 768 phone. ---------------------------------------------------------------------------- */