/* ===================================================================== MarkFlix Design System — Design Tokens (single source of truth) Direction: "Cinematic Premium" — deep OLED base, glass surfaces, reserved cyan→rose gradients, smooth expressive motion. This file is the foundation. Load it BEFORE every other stylesheet. It keeps the legacy variable names (--background-color, --accent-color, …) as aliases so existing pages keep working while we migrate. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); :root { /* ---- Color · base & surfaces (OLED-deep, layered) ---------------- */ --bg: #08080c; /* page background — true near-black */ --bg-elevated: #0f0f15; /* raised solid panels */ --surface-1: rgba(255, 255, 255, 0.03); /* faint glass */ --surface-2: rgba(255, 255, 255, 0.05); /* hover glass */ --surface-3: rgba(255, 255, 255, 0.08); /* active / pressed glass */ --surface-solid: #14141a; /* opaque card surface */ --glass-bg: rgba(18, 18, 26, 0.62); /* frosted nav / modal */ --glass-blur: 18px; /* ---- Color · brand ---------------------------------------------- */ --primary: #0ea5e9; --primary-hover: #38bdf8; --primary-press: #0284c7; --accent: #f43f5e; --accent-hover: #fb7185; --accent-press: #e11d48; /* Gradients are PROPER gradient values now (use directly, no wrapping). Reserve --gradient-brand for primary CTAs & key moments only. */ --gradient-brand: linear-gradient(120deg, #0ea5e9 0%, #f43f5e 100%); --gradient-brand-soft: linear-gradient(120deg, rgba(14,165,233,0.18), rgba(244,63,94,0.18)); --gradient-scrim: linear-gradient(180deg, rgba(8,8,12,0) 0%, rgba(8,8,12,0.65) 55%, var(--bg) 100%); --gradient-sheen: linear-gradient(120deg, transparent, rgba(255,255,255,0.06), transparent); /* App background — deep OLED with faint brand glows (Cinematic Premium). style.css applies var(--gradient-hero) to ; this upgrades it in place. */ --gradient-hero: radial-gradient(1200px 600px at 80% -10%, rgba(14, 165, 233, 0.10), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(244, 63, 94, 0.08), transparent 55%), var(--bg); /* ---- Color · text ----------------------------------------------- */ --text: #fafafa; --text-secondary: #a1a1aa; --text-muted: #71717a; --text-faint: #52525b; --text-on-brand: #ffffff; /* ---- Color · borders & status ----------------------------------- */ --border: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.14); --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #0ea5e9; /* ---- Spacing scale (4px base, single rhythm for everything) ------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---- Typography ------------------------------------------------- */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 2rem; /* 32 */ --text-4xl: 2.75rem; /* 44 */ --text-5xl: 3.75rem; /* 60 — cinematic hero titles */ --leading-tight: 1.12; --leading-snug: 1.35; --leading-normal: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ---- Radii ------------------------------------------------------ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ---- Elevation · shadows & glows -------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-xl: 0 20px 56px rgba(0, 0, 0, 0.55); --glow-primary: 0 0 0 1px rgba(14, 165, 233, 0.5), 0 0 28px rgba(14, 165, 233, 0.28); --glow-accent: 0 0 0 1px rgba(244, 63, 94, 0.5), 0 0 28px rgba(244, 63, 94, 0.28); /* ---- Motion ----------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expressive settle — the signature */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-slower: 600ms; /* ---- Z-index scale (no more magic numbers) ---------------------- */ --z-base: 1; --z-raised: 10; --z-dropdown: 1000; --z-sticky: 1100; --z-nav: 1200; --z-overlay: 1300; --z-modal: 1400; --z-toast: 1500; /* ---- Focus ring (accessibility) --------------------------------- */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); /* ---- Skeleton loading ------------------------------------------- */ --skeleton-base: rgba(255, 255, 255, 0.04); --skeleton-shine: rgba(255, 255, 255, 0.09); /* ---- Layout ----------------------------------------------------- */ --container-max: 1280px; --nav-height: 64px; /* ================================================================= Legacy aliases — keep existing pages working during migration. Remove a line here only once nothing references that old name. ================================================================= */ --primary-color: var(--primary); --primary-hover: var(--primary-hover); --secondary-color: #1e1e28; --background-color: var(--bg); --surface-color: var(--surface-solid); --surface-elevated: var(--bg-elevated); --accent-color: var(--accent); --accent-hover: var(--accent-hover); --text-color: var(--text); --border-color: var(--border); --gradient-primary: #0ea5e9, #0284c7; /* legacy bare-stops form, still used by old CSS */ --gradient-accent: #f43f5e, #e11d48; /* legacy bare-stops form, still used by old CSS */ --shadow-glow: var(--glow-primary); --shadow-accent: var(--glow-accent); --shadow-neon: var(--glow-primary); /* was undefined in old CSS — now a tasteful primary glow */ --transition-fast: var(--dur-fast) var(--ease-out); --transition-base: var(--dur-base) var(--ease-out); --transition-smooth: var(--dur-slow) var(--ease-out); } /* Respect users who prefer reduced motion — system-wide kill switch. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Consistent keyboard focus everywhere. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* ---- Shared skeleton shimmer utility ------------------------------ */ .skeleton { position: relative; overflow: hidden; background: var(--skeleton-base); border-radius: var(--radius-md); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); animation: skeleton-sweep 1.4s var(--ease-in-out) infinite; } @keyframes skeleton-sweep { 100% { transform: translateX(100%); } }