/* ========================================== SalmasFlix — Theme Tokens Extracted from base.css in Phase 7.1. Ownership of every `:root { --* }` CSS custom property the app reads: - default theme (gold + purple) - 6 additional presets (ocean / rose / sunset / matrix / midnight / crimson) - custom theme (values come in as inline styles on from the picker) - semantic tokens (bg, text, wordle, button gradients) - spacing, radius, transitions, z-index scale, safe-area This file MUST be loaded BEFORE base.css (and before any feature CSS) so every other rule can resolve `var(--primary)` / `rgba(var(--primary-rgb), X)` at paint time. No `*` resets, no body styles, no layout rules — those live in base.css. See CLAUDE.md §Theme System for the full list of presets + the standing rule ("⚠️ Standing rule for ALL future UI work"). ========================================== */ /* Theme system: 7 presets (gold/ocean/rose/sunset/matrix/midnight/crimson) + custom. See CLAUDE.md. */ /* ========================================== PHASE (this commit) — @layer tokens Every rule in this file lives in the lowest-priority layer so theme tokens never accidentally out-specify component rules. The layer stack is declared in public/index.html as: @layer tokens, reset, base, components, features, utilities, overrides; ========================================== */ @layer tokens { :root { /* ========================================== THEME TOKENS — Default (Gold + Purple) Alternate themes override these under body[data-theme="..."] --primary = main action color (was gold) --secondary = accent/violet (was purple) Use rgba(var(--primary-rgb), alpha) for transparent variants. ========================================== */ --primary: #ffd700; --primary-rgb: 255, 215, 0; --primary-light: #ffec8b; --primary-dark: #f0c000; --secondary: #9b59b6; --secondary-rgb: 155, 89, 182; --secondary-alt: #a855f7; --secondary-alt-rgb: 168, 85, 247; --secondary-dark: #8e44ad; --secondary-dark-rgb: 142, 68, 173; --secondary-soft: #c084fc; /* Legacy aliases (kept so existing CSS that references these still works) */ --accent-primary: var(--primary); --accent-secondary: var(--secondary); --accent-tertiary: var(--secondary-dark); --accent-glow: rgba(var(--primary-rgb), 0.4); --accent-glow-purple: rgba(var(--secondary-rgb), 0.4); --bg-dark: #0d0b1e; --bg-card: rgba(25, 20, 50, 0.55); --bg-glass: rgba(255, 255, 255, 0.05); /* Unified button colors */ --btn-primary-bg: linear-gradient(135deg, var(--primary), var(--primary-light)); --btn-primary-color: #0d0b1e; --btn-primary-shadow: rgba(var(--primary-rgb), 0.35); --btn-secondary-bg: linear-gradient(135deg, var(--secondary-dark), var(--secondary)); --btn-secondary-color: #fff; --btn-secondary-shadow: rgba(var(--secondary-dark-rgb), 0.35); --btn-danger-bg: linear-gradient(135deg, #ef4444, #dc2626); --btn-danger-color: #fff; --btn-danger-shadow: rgba(239, 68, 68, 0.3); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.78); /* Phase 8.5 contrast audit — was 0.4, which ran ~3.6:1 against var(--bg-dark) and failed WCAG 2.1 AA for normal text (4.5:1). 0.6 is the lowest alpha that reliably clears 4.5:1 on our dark bg palette. */ --text-muted: rgba(255, 255, 255, 0.6); /* Disabled-state text — higher contrast than muted so disabled labels still read at 3:1 minimum (relaxed rule for non-essential text). */ --text-disabled: rgba(255, 255, 255, 0.45); /* Placeholder text — at least 0.55 so placeholder copy in inputs stays legible on the glass-card backgrounds. */ --text-placeholder: rgba(255, 255, 255, 0.55); /* Wordle Colors */ --correct: #27ae60; --present: #f39c12; --absent: #2c2c3e; --tile-border: #3d3d5c; --tile-empty: #1a1a2e; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Z-index scale */ --z-content: 1; --z-sticky: 10; --z-overlay: 100; --z-nav: 200; --z-modal-backdrop: 1000; --z-modal: 1001; --z-toast: 2000; --z-critical: 9999; /* Safe areas for mobile */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* ========================================== BREAKPOINT LADDER (Phase 7.6 consolidation — enforced). Kept as comment-constants because @media queries can't consume custom properties. The ladder is: --bp-sm: 480px — phone-small --bp-md: 768px — phone-landscape / tablet-portrait --bp-lg: 1024px — tablet-landscape / desktop --bp-xl: 1280px — desktop-wide Phase 7.6 snapped the 11 original ad-hoc breakpoints (380/400/430/480/500/560/600/768/900/1024/1200) down to these 4 via a bulk find-and-replace: 380/400/430/480 → 480 (widens phone-small scope) 500 → 480 (narrows slightly — 481-500 now falls through to the 600 → 768 bucket; visually equivalent since those rules were additive) 560/600 → 768 (widens phone → now also phone-landscape + tablet-portrait; the snap is explicit because this codebase is phone-first and the "phone" refinements read fine on 7" tablets) 769 → 768 (merges with max-width:768 partners; 1px overlap at exactly 768 resolves by source order — not visually material) 900 → 1024 (narrows desktop gate — old 900 started at 900, now starts at 1024) 1024 → 1024 (no change) 1200 → 1280 (widens desktop-wide gate) Every new @media query in component/feature CSS MUST use one of these exact values. Height-only queries (min-height, max-height) are a separate ladder and not covered here. ========================================== */ } /* ========================================== THEME VARIANT: Ocean (Teal primary + Coral secondary) Selector works on or , whichever has the attribute ========================================== */ [data-theme="ocean"] { --primary: #2dd4bf; --primary-rgb: 45, 212, 191; --primary-light: #5eead4; --primary-dark: #0d9488; --secondary: #fb7185; --secondary-rgb: 251, 113, 133; --secondary-alt: #f43f5e; --secondary-alt-rgb: 244, 63, 94; --secondary-dark: #e11d48; --secondary-dark-rgb: 225, 29, 72; --secondary-soft: #fda4af; --bg-dark: #07131a; --bg-card: rgba(20, 45, 55, 0.55); } /* ========================================== THEME VARIANT: Rose (Pink primary + Mint secondary) ========================================== */ [data-theme="rose"] { --primary: #f472b6; --primary-rgb: 244, 114, 182; --primary-light: #f9a8d4; --primary-dark: #db2777; --secondary: #34d399; --secondary-rgb: 52, 211, 153; --secondary-alt: #10b981; --secondary-alt-rgb: 16, 185, 129; --secondary-dark: #059669; --secondary-dark-rgb: 5, 150, 105; --secondary-soft: #6ee7b7; --bg-dark: #1a0a1a; --bg-card: rgba(50, 20, 40, 0.55); } /* ========================================== THEME VARIANT: Sunset (Orange primary + Indigo secondary) ========================================== */ [data-theme="sunset"] { --primary: #f97316; --primary-rgb: 249, 115, 22; --primary-light: #fb923c; --primary-dark: #ea580c; --secondary: #6366f1; --secondary-rgb: 99, 102, 241; --secondary-alt: #818cf8; --secondary-alt-rgb: 129, 140, 248; --secondary-dark: #4f46e5; --secondary-dark-rgb: 79, 70, 229; --secondary-soft: #a5b4fc; --bg-dark: #1a0e0a; --bg-card: rgba(50, 25, 15, 0.55); } /* ========================================== THEME VARIANT: Matrix (Neon green on near-black) ========================================== */ [data-theme="matrix"] { --primary: #22c55e; --primary-rgb: 34, 197, 94; --primary-light: #4ade80; --primary-dark: #15803d; --secondary: #166534; --secondary-rgb: 22, 101, 52; --secondary-alt: #15803d; --secondary-alt-rgb: 21, 128, 61; --secondary-dark: #14532d; --secondary-dark-rgb: 20, 83, 45; --secondary-soft: #86efac; --bg-dark: #020617; --bg-card: rgba(10, 25, 15, 0.6); } /* ========================================== THEME VARIANT: Midnight (Deep blue + cyan) ========================================== */ [data-theme="midnight"] { --primary: #3b82f6; --primary-rgb: 59, 130, 246; --primary-light: #60a5fa; --primary-dark: #2563eb; --secondary: #06b6d4; --secondary-rgb: 6, 182, 212; --secondary-alt: #22d3ee; --secondary-alt-rgb: 34, 211, 238; --secondary-dark: #0891b2; --secondary-dark-rgb: 8, 145, 178; --secondary-soft: #67e8f9; --bg-dark: #050a18; --bg-card: rgba(15, 25, 50, 0.55); } /* ========================================== THEME VARIANT: Crimson (Red + amber gold) ========================================== */ [data-theme="crimson"] { --primary: #ef4444; --primary-rgb: 239, 68, 68; --primary-light: #f87171; --primary-dark: #dc2626; --secondary: #f59e0b; --secondary-rgb: 245, 158, 11; --secondary-alt: #fbbf24; --secondary-alt-rgb: 251, 191, 36; --secondary-dark: #d97706; --secondary-dark-rgb: 217, 119, 6; --secondary-soft: #fcd34d; --bg-dark: #1a0808; --bg-card: rgba(50, 15, 15, 0.55); } /* ========================================== THEME VARIANT: Custom --primary / --primary-rgb / --secondary / --secondary-rgb are written as inline styles on by the picker. Light/dark shades are derived via color-mix(). --secondary-alt-rgb / --secondary-dark-rgb reuse --secondary-rgb (close enough for transparency uses). ========================================== */ [data-theme="custom"] { --primary-light: color-mix(in srgb, var(--primary), white 30%); --primary-dark: color-mix(in srgb, var(--primary), black 20%); --secondary-alt: var(--secondary); --secondary-alt-rgb: var(--secondary-rgb); --secondary-dark: color-mix(in srgb, var(--secondary), black 25%); --secondary-dark-rgb: var(--secondary-rgb); --secondary-soft: color-mix(in srgb, var(--secondary), white 30%); } } /* end @layer tokens */