/* * ============================================================ * TILE ATLAS — Design Tokens v3.0 * Pixelcius Studio · 2026-04-30 * * PHASE 0 WALKING SKELETON — canonical token layer. * All downstream CSS MUST consume these variables; never * hard-code a hex value in component files. * * Import order: * 1. static/fonts.css (font-face declarations) * 2. static/tokens.css (THIS FILE — design tokens) * 3. src/lib/styles/global.css (reset + base) * 4. src/lib/styles/animations.css (keyframes) * 5. src/lib/styles/components.css (component layer) * * ─── OPENPROPS STRATEGY ──────────────────────────────────── * Decision: VENDOR the values we need rather than depend on * an external CDN at runtime. * * Why not CDN? * - Mobile game: offline-first PWA via Capacitor. A CDN call * would fail once the app is installed and running offline. * - The full OpenProps package is ~10 KB min (CDN import). * We only use ~30 of its 500+ variables — mostly easing * curves and shadow patterns. Vendoring just those saves * the round-trip and removes a hard external dependency. * - OpenProps *inspired* the token structure here (naming * conventions for easing, shadows, radii), but all values * are hand-tuned for this specific game aesthetic. * * Reference: https://open-props.style/ * OpenProps MIT license — Adam Argyle * ============================================================ */ /* ============================================================ ROOT CUSTOM PROPERTIES ============================================================ */ :root { /* ========================================================== 1. BRAND PALETTE — 5 canonical hex colors Source: ART_BIBLE.md §3 + Patron-confirmed 2026-04-30 Iznik ceramic / Ottoman manuscript inspiration. ========================================================== */ --brand-iznik-blue: #1B4F8A; /* Deep Bosphorus blue — primary brand */ --brand-ottoman-gold: #C8922A; /* Manuscript gold — CTA, highlights */ --brand-cream-vellum: #F2E8D5; /* Aged paper — primary text, tile face */ --brand-coral-red: #C0392B; /* Ottoman red — danger, energy */ --brand-night-ink: #0E0B1A; /* Deep night — primary background */ /* ========================================================== 2. BACKGROUND DARK MODE SCALE — 5 shades Progressively lighter surfaces, always over Night Ink base. ========================================================== */ --color-bg-deepest: #0E0B1A; /* Root background — Night Ink */ --color-bg-deep: #14101F; /* Layer 1 — slightly lifted */ --color-bg-mid: #1A2744; /* Mid layer — blue-dark surface */ --color-bg-surface: #243558; /* Raised card surface */ --color-bg-raised: #2E4270; /* Top-most panel surface */ /* Overlay (modal scrim) */ --color-bg-overlay: rgba(14, 11, 26, 0.82); /* 82% black-ink scrim */ --color-bg-glass: rgba(36, 53, 88, 0.55); /* glassmorphism base */ /* ========================================================== 3. PER-CITY ACCENT PALETTES — 6 cities × 3 colors each a = primary, b = dark shade, c = highlight/light Override via .city--[name] class on . ========================================================== */ /* Istanbul — Boğaz Şehri (Bosphorus) */ --city-istanbul-a: #1B4F8A; --city-istanbul-b: #0A2A5C; --city-istanbul-c: #7EB8D4; /* Kapadokya — Peri Bacaları (Fairy Chimneys) */ --city-kapadokya-a: #C0602A; --city-kapadokya-b: #7A3A1A; --city-kapadokya-c: #F4A255; /* Efes — Antik Şehir (Ancient Ephesus) */ --city-efes-a: #2E7D6B; --city-efes-b: #1A4A3C; --city-efes-c: #A8D5C5; /* Antalya — Akdeniz Şehri (Mediterranean Coast) */ --city-antalya-a: #0077B6; --city-antalya-b: #004E7C; --city-antalya-c: #90E0EF; /* Mardin — Taş Şehir (Stone City) */ --city-mardin-a: #8B6914; --city-mardin-b: #5C4209; --city-mardin-c: #D4B264; /* Trabzon — Karadeniz (Black Sea) */ --city-trabzon-a: #1B6B3A; --city-trabzon-b: #0E3D22; --city-trabzon-c: #74C99B; /* Active city shorthand — override these in JS on city change */ --city-accent-a: var(--city-istanbul-a); --city-accent-b: var(--city-istanbul-b); --city-accent-c: var(--city-istanbul-c); /* ========================================================== 4. SEMANTIC COLORS — 5 categories × 4 states each (base / hover / active / disabled) ========================================================== */ /* Success — green tones */ --color-success: #2ECC71; --color-success-hover: #27AE60; --color-success-active: #229954; --color-success-subtle: rgba(46, 204, 113, 0.15); /* Danger — red/coral tones */ --color-danger: #E74C3C; --color-danger-hover: #C0392B; --color-danger-active: #A93226; --color-danger-subtle: rgba(231, 76, 60, 0.15); /* Warning — amber tones */ --color-warning: #F39C12; --color-warning-hover: #D68910; --color-warning-active: #B9770E; --color-warning-subtle: rgba(243, 156, 18, 0.15); /* Info — sky blue tones */ --color-info: #3498DB; --color-info-hover: #2980B9; --color-info-active: #2471A3; --color-info-subtle: rgba(52, 152, 219, 0.15); /* Accent — purple (combo, wild, premium events) */ --color-accent: #9B59B6; --color-accent-hover: #8E44AD; --color-accent-active: #7D3C98; --color-accent-subtle: rgba(155, 89, 182, 0.15); /* ========================================================== 5. TEXT COLOR STACK 5 semantic roles + gold variants. ========================================================== */ --color-text-primary: #F2E8D5; /* Cream Vellum — default body */ --color-text-secondary: rgba(242, 232, 213, 0.72); /* Slightly dimmed */ --color-text-muted: rgba(242, 232, 213, 0.45); /* Caption, placeholder */ --color-text-inverse: #0E0B1A; /* Dark text on light bg */ --color-text-gold: #C8922A; /* Ottoman Gold — labels, scores */ --color-text-gold-light: #F0C97A; /* Light gold — shimmer, borders */ --color-text-disabled: rgba(242, 232, 213, 0.30); /* Inactive states */ /* Border utility (frequently used divider alpha) */ --color-border-subtle: rgba(242, 232, 213, 0.12); --color-border-mid: rgba(242, 232, 213, 0.22); /* ========================================================== 6. TILE-SPECIFIC COLORS Iznik ceramic aesthetic — cream face + colored borders. ========================================================== */ /* Tile face gradient stops */ --color-tile-face-top: #FFFFFF; --color-tile-face-mid: #F2E8D5; --color-tile-face-bot: #E8D8B8; --color-tile-border: #C4A866; --color-tile-edge: #5C3D0A; /* Dark bottom shadow edge */ /* City tile borders — match city accent-a but warmer */ --color-tile-border-istanbul: #3A6FAB; --color-tile-border-kapadokya: #D4722E; --color-tile-border-efes: #3D9980; --color-tile-border-antalya: #1A8FC8; --color-tile-border-mardin: #A07A1E; --color-tile-border-trabzon: #2B8050; /* Tile state colors */ --color-tile-locked: rgba(0, 0, 0, 0.50); /* Special tile types */ --color-tile-wild-a: #F0C97A; /* Gold wild */ --color-tile-wild-b: #E74C3C; /* Red wild */ --color-tile-wild-c: #9B59B6; /* Purple wild */ --color-tile-wild-d: #3498DB; /* Blue wild */ --color-tile-bomb-bg: #1A0D20; --color-tile-bomb-accent: #E74C3C; --color-tile-freeze-bg: #D4EEFF; --color-tile-freeze-accent: #3498DB; /* ========================================================== 7. BACKGROUND GRADIENTS LIBRARY — 5 named gradients Named for the time-of-day or atmosphere they evoke. ========================================================== */ /* Cosmic: deepest night — primary game background */ --grad-cosmic: radial-gradient( ellipse at 50% 0%, #1A2744 0%, #0E0B1A 60% ); /* Dawn: pre-sunrise warm blue-rose — morning reward screens */ --grad-dawn: linear-gradient( 160deg, #1B3D6B 0%, #3D2040 40%, #6B2040 100% ); /* Golden Hour: afternoon warmth — CTA panels, shop */ --grad-golden-hour: linear-gradient( 180deg, #F0C97A 0%, #C8922A 50%, #A67820 100% ); /* Midnight: full dark mode — level board, gameplay */ --grad-midnight: linear-gradient( 180deg, #0E0B1A 0%, #1A2744 55%, #243558 100% ); /* Dusk: twilight purple-blue — city unlock, transition */ --grad-dusk: linear-gradient( 170deg, #243558 0%, #1E1A40 50%, #0E0B1A 100% ); /* Per-city gradients */ --grad-city-istanbul: linear-gradient(135deg, #1B4F8A 0%, #0A2A5C 100%); --grad-city-kapadokya: linear-gradient(135deg, #C0602A 0%, #7A3A1A 100%); --grad-city-efes: linear-gradient(135deg, #2E7D6B 0%, #1A4A3C 100%); --grad-city-antalya: linear-gradient(135deg, #0077B6 0%, #004E7C 100%); --grad-city-mardin: linear-gradient(135deg, #8B6914 0%, #5C4209 100%); --grad-city-trabzon: linear-gradient(135deg, #1B6B3A 0%, #0E3D22 100%); /* Active city gradient shorthand — override in JS */ --grad-city-active: var(--grad-city-istanbul); /* Tile face gradient */ --grad-tile-face: linear-gradient(170deg, #FFFFFF 0%, #F2E8D5 55%, #E8D8B8 100%); /* Modal body gradient */ --grad-modal-body: linear-gradient(170deg, #243558 0%, #1A2744 60%, #0E0B1A 100%); /* ========================================================== 8. SPACING SCALE — 8-pt grid Named by unit count (--space-N = N × 4px base) Comment shows pixel value for quick reference. ========================================================== */ --space-1: 4px; /* 0.5 grid unit */ --space-2: 8px; /* 1 grid unit */ --space-3: 12px; /* 1.5 grid units */ --space-4: 16px; /* 2 grid units */ --space-5: 24px; /* 3 grid units */ --space-6: 32px; /* 4 grid units */ --space-7: 48px; /* 6 grid units */ --space-8: 64px; /* 8 grid units */ --space-9: 96px; /* 12 grid units */ /* Component-specific spacing aliases (derived, not overridden) */ --gap-tile: 6px; --gap-card: 14px; --gap-power: 8px; --pad-topbar: 8px 14px; --pad-pill: 6px 12px; --pad-modal: var(--space-5); /* 24px */ --pad-card: var(--space-4); /* 16px */ --pad-slot-bar: var(--space-2); /* 8px */ /* Layout constraints */ --layout-max-width: 480px; --layout-topbar-h: 52px; --layout-slotbar-h: 72px; --layout-power-strip-h: 64px; --layout-progress-bar-h: 6px; /* ========================================================== 9. TYPOGRAPHY SCALE — 8 sizes, 8pt grid-aligned All sizes are pixel values for mobile consistency. Use rem in web contexts by dividing by 16. ========================================================== */ --type-2xs: 11px; /* Legal footnote, hint text */ --type-xs: 13px; /* Caption, badge label */ --type-sm: 14px; /* Supporting text, secondary UI */ --type-base: 16px; /* Body default */ --type-md: 18px; /* Slightly elevated body */ --type-lg: 22px; /* Section heading */ --type-xl: 32px; /* Screen title, score */ --type-display: 56px; /* Cinzel display — splash, logo */ /* Font weight scale */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* Line heights */ --lh-flat: 1.0; /* Single-line numbers, badges */ --lh-tight: 1.2; /* Display headings */ --lh-heading: 1.3; /* Section headings */ --lh-ui: 1.4; /* UI labels, buttons */ --lh-body: 1.6; /* Body reading copy */ /* Letter spacing */ --ls-tight: -0.02em; --ls-normal: 0em; --ls-label: 0.05em; --ls-wide: 0.10em; --ls-caps: 0.12em; /* ALL CAPS utility labels */ /* Font stacks */ --font-display: "Cinzel", "Palatino Linotype", "Book Antiqua", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Roboto Mono", "Cascadia Code", Consolas, monospace; /* ========================================================== 10. BORDER RADIUS SCALE 4 / 8 / 12 / 16 / 24 / full ========================================================== */ --radius-1: 4px; /* Input, small chip */ --radius-2: 8px; /* Button, badge */ --radius-3: 12px; /* Card, panel */ --radius-4: 16px; /* Modal, sheet */ --radius-5: 24px; /* Large modal, overlay panel */ --radius-full: 999px; /* Pill, avatar */ /* Semantic aliases */ --radius-tile: var(--radius-2); /* Iznik tile shape */ --radius-btn: var(--radius-2); /* Buttons */ --radius-card: var(--radius-3); /* City cards */ --radius-modal: var(--radius-4); /* Modals */ --radius-panel: var(--radius-5); /* Bottom sheets */ --radius-pill: var(--radius-full); /* Tags, counters */ /* ========================================================== 11. SHADOW SYSTEM — 5 named elevation levels Inspired by OpenProps shadow scale (vendored). Levels: flat / raised / floating / elevated / cinematic ========================================================== */ /* flat — no elevation, flush with surface */ --shadow-flat: none; /* raised — subtle card lift off background */ --shadow-raised: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20); /* floating — component hovering over layout */ --shadow-floating: 0 3px 0 rgba(0, 0, 0, 0.45), 0 5px 10px rgba(0, 0, 0, 0.35); /* elevated — panel / modal over game board */ --shadow-elevated: 0 6px 16px rgba(0, 0, 0, 0.40), 0 4px 0 rgba(0, 0, 0, 0.50); /* cinematic — full-screen overlay, max depth */ --shadow-cinematic: 0 12px 40px rgba(0, 0, 0, 0.60), 0 6px 0 rgba(0, 0, 0, 0.70); /* Legacy numeric aliases for backward-compat */ --shadow-0: var(--shadow-flat); --shadow-1: var(--shadow-raised); --shadow-2: var(--shadow-floating); --shadow-3: var(--shadow-elevated); --shadow-4: var(--shadow-cinematic); /* Tile-specific shadow (ceramic edge effect) */ --shadow-tile: 0 3px 0 var(--color-tile-edge), 0 5px 10px rgba(0, 0, 0, 0.40), inset 0 -2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 3px rgba(255, 255, 255, 0.55); --shadow-tile-locked: 0 2px 0 #2A1D0A, inset 0 0 0 1px rgba(0, 0, 0, 0.30); /* Glow shadows (game-state feedback) */ --glow-tile-hover: 0 0 18px rgba(200, 146, 42, 0.55); --glow-tile-match: 0 0 28px rgba(46, 204, 113, 0.70); --glow-slot-danger: 0 0 14px rgba(231, 76, 60, 0.80); --glow-power-active: 0 0 24px rgba(27, 79, 138, 0.65); --glow-modal: 0 20px 60px rgba(200, 146, 42, 0.25), 0 0 0 4px rgba(0, 0, 0, 0.40); /* Button 3D press-edge shadows */ --shadow-btn-gold: 0 4px 0 #7A5A14, 0 6px 14px rgba(200, 146, 42, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.20), inset 0 2px 4px rgba(255, 255, 255, 0.45); --shadow-btn-gold-active: 0 2px 0 #7A5A14, 0 4px 8px rgba(200, 146, 42, 0.25); --shadow-btn-secondary: 0 4px 0 var(--color-bg-mid), 0 6px 14px rgba(0, 0, 0, 0.35); --shadow-btn-danger: 0 4px 0 #6A1C1C, 0 6px 14px rgba(231, 76, 60, 0.35); /* ========================================================== 12. ANIMATION DURATION TOKENS 5 named durations — instant through cinematic. All zero under prefers-reduced-motion (see end of file). ========================================================== */ --dur-instant: 100ms; /* Instant feedback — button press */ --dur-quick: 200ms; /* Fast micro-animation — badge pop */ --dur-snappy: 300ms; /* Snappy — slot fill, score bump */ --dur-medium: 500ms; /* Medium — modal, screen transition */ --dur-cinematic: 800ms; /* Cinematic — star reveal, city unlock */ /* Extended durations for specific use cases */ --dur-danger-pulse: 800ms; /* Looping danger pulse */ --dur-breathe: 3000ms; /* Idle breathe loop */ --dur-bg-float: 20000ms; /* Background parallax float */ /* Stagger tokens (used by JS stagger systems) */ --stagger-tile: 35ms; --stagger-ui: 55ms; --stagger-star: 180ms; /* ========================================================== 13. EASING CURVES — 12 named ak-ease-* tokens All cubic-bezier values vendored from OpenProps + hand-tuned for the Tile Atlas game feel. "ak-" prefix = Anadolu Kilim (Anatolian carpet) brand. ========================================================== */ /* quick: fast deceleration — snappy tap response */ --ak-ease-quick: cubic-bezier(0.20, 0.00, 0.00, 1.00); /* back-out: overshoot then settle — button release, modal pop */ --ak-ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1.00); /* bounce: hard bounce landing — tile slot fill, slot land */ --ak-ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* anticipate: pull back before launch — combo badge, power-up */ --ak-ease-anticipate: cubic-bezier(0.38, -0.40, 0.88, 1.35); /* settle: smooth slow deceleration — screen enter, modal exit */ --ak-ease-settle: cubic-bezier(0.16, 1.00, 0.30, 1.00); /* snap: instant departure, drift to rest — match clear */ --ak-ease-snap: cubic-bezier(0.00, 0.00, 0.20, 1.00); /* breath: symmetric in-out — idle pulse, breathe loops */ --ak-ease-breath: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* elastic-out: high-frequency spring — score numbers, counters */ --ak-ease-elastic-out: cubic-bezier(0.43, 0.195, 0.02, 1.20); /* cosmic: deep dramatic ease — splash screen, big reveals */ --ak-ease-cosmic: cubic-bezier(0.10, 0.80, 0.10, 1.00); /* iris: clip-path expansion — city portal iris wipe */ --ak-ease-iris: cubic-bezier(0.30, 0.00, 0.10, 1.00); /* juice: maximum overshoot "squash and stretch" — star hit */ --ak-ease-juice: cubic-bezier(0.22, 1.40, 0.36, 1.00); /* cinematic: slow majestic entrance — logo, win screen hero */ --ak-ease-cinematic: cubic-bezier(0.00, 0.20, 0.20, 1.00); /* Legacy ease aliases (backward compat with old anim.css) */ --ease-entry: var(--ak-ease-juice); --ease-exit: cubic-bezier(0.55, 0.00, 1.00, 0.45); --ease-bounce: var(--ak-ease-bounce); --ease-anticipate: var(--ak-ease-anticipate); --ease-settle: var(--ak-ease-settle); --ease-snap: var(--ak-ease-snap); --ease-breath: var(--ak-ease-breath); --ease-spring: var(--ak-ease-elastic-out); --ease-back-in: cubic-bezier(0.36, 0.00, 0.66, -0.56); --ease-back-out: var(--ak-ease-back-out); --ease-standard: cubic-bezier(0.20, 0.00, 0.00, 1.00); --ease-linear: linear; --ease-btn-press: var(--ak-ease-back-out); --ease-slide: var(--ak-ease-juice); --ease-modal: var(--ak-ease-settle); /* Spring physics config (read by JS animation systems) */ --spring-tension-soft: 120; --spring-tension-medium: 220; --spring-tension-stiff: 380; --spring-friction-low: 8; --spring-friction-med: 14; --spring-friction-high: 22; /* Color flash tokens for WAAPI overlay animations */ --flash-match: rgba(255, 200, 87, 0.60); --flash-combo: rgba(255, 85, 119, 0.60); --flash-coin: rgba(255, 233, 160, 0.80); --flash-freeze: rgba( 95, 196, 232, 0.50); /* ========================================================== 14. Z-INDEX SCALE — semantic layering ========================================================== */ --z-bg: -1; /* Background / parallax layers */ --z-board: 1; /* Game board tiles */ --z-ui: 10; /* HUD, topbar, slot bar */ --z-overlay: 50; /* Overlay scrim beneath modal */ --z-modal: 100; /* Modal dialogs, bottom sheets */ --z-fx: 150; /* Particle FX, coin fly, confetti */ --z-toast: 200; /* Toast notifications */ --z-transition: 900; /* Full-screen transition covers */ --z-top: 999; /* Emergency — always on top */ /* ========================================================== 15. SAFE-AREA PADDING HELPERS Critical for notch / dynamic island / home indicator on iOS (Capacitor target). Always add these to fixed positioned elements touching screen edges. ========================================================== */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* Computed padding shortcuts */ --pad-safe-top: calc(var(--safe-top) + var(--space-2)); --pad-safe-bottom: calc(var(--safe-bottom) + var(--space-2)); --pad-safe-x: calc(max(var(--safe-left), var(--safe-right)) + var(--space-4)); /* ========================================================== 16. ICONOGRAPHY — Size System ========================================================== */ --icon-power-box: 40px; --icon-power-art: 28px; --icon-topbar-box: 36px; --icon-topbar-art: 18px; --icon-currency-box: 20px; --icon-currency-art: 18px; --icon-city-card-box: 48px; --icon-city-card-art: 36px; --tile-art-fill: 72%; /* % of tile bounding box */ /* ========================================================== 17. BORDER HELPERS ========================================================== */ --border-subtle: 1px solid var(--color-border-subtle); --border-mid: 1px solid var(--color-border-mid); --border-tile: 1.5px solid var(--color-tile-border); --border-modal: 2px solid var(--brand-ottoman-gold); --border-gold: 2px solid var(--color-text-gold-light); --border-power: 2px solid #3D5A8A; --border-slot-empty: 1px dashed var(--color-border-subtle); /* ========================================================== 18. LEGACY SHORTHAND VARS — backward compat Old demo CSS files and existing prototype use these single-letter vars. Do NOT use in new code — prefer semantic names above. ========================================================== */ --gold: var(--brand-ottoman-gold); --gold2: var(--color-text-gold-light); --bg: var(--color-bg-deepest); --tx: var(--color-text-primary); --tm: var(--color-text-secondary); --td: var(--color-text-muted); --bd: var(--color-border-subtle); } /* end :root */ /* ============================================================ PER-CITY CLASS OVERRIDES Apply one of these classes to or .app-root to activate per-city accent colors and gradients globally. JS does: document.body.className = `city--${cityKey}`; ============================================================ */ .city--istanbul { --city-accent-a: var(--city-istanbul-a); --city-accent-b: var(--city-istanbul-b); --city-accent-c: var(--city-istanbul-c); --grad-city-active: var(--grad-city-istanbul); } .city--kapadokya { --city-accent-a: var(--city-kapadokya-a); --city-accent-b: var(--city-kapadokya-b); --city-accent-c: var(--city-kapadokya-c); --grad-city-active: var(--grad-city-kapadokya); } .city--efes { --city-accent-a: var(--city-efes-a); --city-accent-b: var(--city-efes-b); --city-accent-c: var(--city-efes-c); --grad-city-active: var(--grad-city-efes); } .city--antalya { --city-accent-a: var(--city-antalya-a); --city-accent-b: var(--city-antalya-b); --city-accent-c: var(--city-antalya-c); --grad-city-active: var(--grad-city-antalya); } .city--mardin { --city-accent-a: var(--city-mardin-a); --city-accent-b: var(--city-mardin-b); --city-accent-c: var(--city-mardin-c); --grad-city-active: var(--grad-city-mardin); } .city--trabzon { --city-accent-a: var(--city-trabzon-a); --city-accent-b: var(--city-trabzon-b); --city-accent-c: var(--city-trabzon-c); --grad-city-active: var(--grad-city-trabzon); } /* ============================================================ SEMANTIC UTILITY CLASSES Thin helper layer — consume tokens, never hard-code values. ============================================================ */ /* Text utilities */ .text-gold { color: var(--color-text-gold); } .text-gold-light { color: var(--color-text-gold-light); } .text-muted { color: var(--color-text-muted); } .text-secondary { color: var(--color-text-secondary); } .text-primary { color: var(--color-text-primary); } .text-inverse { color: var(--color-text-inverse); } .text-danger { color: var(--color-danger); } .text-success { color: var(--color-success); } /* Font family utilities */ .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; } /* Font weight utilities */ .weight-regular { font-weight: var(--fw-regular); } .weight-medium { font-weight: var(--fw-medium); } .weight-semibold { font-weight: var(--fw-semibold); } .weight-bold { font-weight: var(--fw-bold); } .weight-black { font-weight: var(--fw-black); } /* Radius utilities */ .radius-sm { border-radius: var(--radius-1); } .radius-md { border-radius: var(--radius-2); } .radius-lg { border-radius: var(--radius-3); } .radius-xl { border-radius: var(--radius-4); } .radius-tile { border-radius: var(--radius-tile); } .radius-pill { border-radius: var(--radius-full); } .radius-card { border-radius: var(--radius-card); } .radius-modal { border-radius: var(--radius-modal); } /* Elevation utilities */ .elevation-flat { box-shadow: var(--shadow-flat); } .elevation-raised { box-shadow: var(--shadow-raised); } .elevation-floating { box-shadow: var(--shadow-floating); } .elevation-elevated { box-shadow: var(--shadow-elevated); } .elevation-cinematic{ box-shadow: var(--shadow-cinematic); } /* Legacy elevation aliases */ .elevation-1 { box-shadow: var(--shadow-1); } .elevation-2 { box-shadow: var(--shadow-2); } .elevation-3 { box-shadow: var(--shadow-3); } .elevation-4 { box-shadow: var(--shadow-4); } /* ============================================================ REDUCE-MOTION OVERRIDES All animation duration tokens collapse to 0.01ms when the user has enabled the system reduce-motion accessibility preference. This is the GLOBAL kill-switch. The token values are also overridden so any JS that reads them via getComputedStyle() also gets near-zero durations. ============================================================ */ @media (prefers-reduced-motion: reduce) { /* Override all duration tokens to near-zero */ :root { --dur-instant: 0.01ms; --dur-quick: 0.01ms; --dur-snappy: 0.01ms; --dur-medium: 0.01ms; --dur-cinematic: 0.01ms; --dur-danger-pulse: 0.01ms; --dur-breathe: 0.01ms; --dur-bg-float: 0.01ms; --stagger-tile: 0ms; --stagger-ui: 0ms; --stagger-star: 0ms; /* Legacy duration tokens */ --anim-instant: 0.01ms; --anim-fast: 0.01ms; --anim-normal: 0.01ms; --anim-slow: 0.01ms; --anim-xslow: 0.01ms; --anim-cinematic: 0.01ms; } /* Hard CSS kill-switch for ALL keyframe + transition animations */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }