/** * FilmMerge Design System — Tokens * * THE SINGLE SOURCE OF TRUTH for every design decision. * * Previously duplicated in every one of the 16 HTML pages. * Now defined once here and loaded globally by the theme. * * To update a token, change it here. The change propagates * instantly to every page, component, and template. * * Theme modes: * - Default: dark (cinematic brand) * - Light: via @media (prefers-color-scheme: light) for system preference * OR via [data-theme="light"] on for manual toggle */ /* ── Dark mode tokens (default brand) ─────────────────────────────────── */ :root { /* ── Backgrounds ──────────────────────────────────────── */ --ink: #0a0c10; /* Primary page background — deepest black */ --deep: #0f1318; /* Secondary background — hero sections, footer */ --panel: #161b23; /* Card / panel background — form cards, nav */ --border: #1e2530; /* Borders, dividers, subtle separators */ /* ── Accent — the gold cinematic identity ────────────── */ --gold: #c8973a; /* Primary gold — CTAs, highlights, active states */ --gold-lt: #e6b55a; /* Light gold — hover states, gradients */ --gold-dk: #a07628; /* Dark gold — pressed states, deep accents */ /* ── Typography ───────────────────────────────────────── */ --cream: #f2ead8; /* Primary text on dark backgrounds */ --muted: #8a92a0; /* Secondary / supporting text */ --white: #ffffff; /* Pure white — major headings only */ /* ── Semantic state colors ────────────────────────────── */ --green: #4ade80; /* Success, approved, active states */ --red: #f87171; /* Error, rejected, danger states */ --yellow: #fbbf24; /* Warning, pending states */ --blue: #60a5fa; /* Info, under-review states */ /* ── Typography faces ─────────────────────────────────── */ --serif: 'Cormorant Garamond', Georgia, serif; /* Display / headings */ --sans: 'Manrope', sans-serif; /* Body / UI text */ /* ── Spacing & layout ─────────────────────────────────── */ --radius: 6px; /* Default corner radius for inputs, cards */ --radius-lg: 14px; /* Large radius — feature cards, modals */ --radius-xl: 20px; /* Extra large — major sections, CTA blocks */ /* ── Motion ───────────────────────────────────────────── */ --transition: 0.35s cubic-bezier(.4, 0, .2, 1); /* Standard easing */ /* ── Container ────────────────────────────────────────── */ --max-width: 1200px; /* Maximum content width */ } /* ── Light mode token overrides ────────────────────────────────────────── */ /* * Applied when: * (a) The user's OS/browser is set to light mode, OR * (b) The element has data-theme="light" (manual toggle) * * Only the tokens that differ in light mode are listed here. * Everything not overridden (gold, radius, fonts, etc.) stays the same. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --ink: #f8f6f2; /* Page background — warm off-white */ --deep: #ede9e1; /* Hero / footer sections */ --panel: #ffffff; /* Card / panel background */ --border: #d8d0c4; /* Borders and dividers */ --cream: #1c1a17; /* Primary text on light backgrounds */ --muted: #6b6560; /* Secondary / supporting text */ --white: #0a0a0a; /* Used for major headings — maps to near-black */ --gold: #9e6e1a; /* Gold deepened for contrast on light bg */ --gold-lt: #b8841f; /* Hover state */ --gold-dk: #7a5010; /* Pressed state */ --green: #16a34a; /* Success — darker for contrast */ --red: #dc2626; /* Error — darker for contrast */ --yellow: #d97706; /* Warning — darker for contrast */ --blue: #2563eb; /* Info — darker for contrast */ } } /* Manual light mode — [data-theme="light"] on overrides system pref */ [data-theme="light"] { --ink: #f8f6f2; --deep: #ede9e1; --panel: #ffffff; --border: #d8d0c4; --cream: #1c1a17; --muted: #6b6560; --white: #0a0a0a; --gold: #9e6e1a; --gold-lt: #b8841f; --gold-dk: #7a5010; --green: #16a34a; --red: #dc2626; --yellow: #d97706; --blue: #2563eb; } /* Manual dark mode override — forces dark regardless of system preference */ [data-theme="dark"] { --ink: #0a0c10; --deep: #0f1318; --panel: #161b23; --border: #1e2530; --cream: #f2ead8; --muted: #8a92a0; --white: #ffffff; --gold: #c8973a; --gold-lt: #e6b55a; --gold-dk: #a07628; --green: #4ade80; --red: #f87171; --yellow: #fbbf24; --blue: #60a5fa; }