/* ============================================================================ AI SCENE STUDIO — TOKENIZED THEME ENGINE ---------------------------------------------------------------------------- Every visual surface in the studio is driven by CSS custom properties (design tokens). Switching the `data-theme` attribute on re-skins the entire application without touching a single component rule. Themes: • kids → "Kids Cyber-Pop" (radiant cyan, neon-pink tracks, energetic type) • noir → "Cinematic Noir" (deep cobalt glass, emerald/violet borders) Token contract (referenced throughout the codebase): --canvas-bg, --canvas-glow --panel-bg, --panel-bg-strong, --panel-border, --panel-border-glow --surface-1, --surface-2, --surface-hover --text-primary, --text-secondary, --text-muted --accent, --accent-2, --accent-contrast --track-text, --track-video, --track-audio, --track-grid, --playhead --shadow-panel, --radius-*, --font-*, --blur-panel, --motion-scale ========================================================================== */ /* --------------------------------------------------------------------------- 1. BASE / SHARED TOKENS (theme-agnostic scaffolding) -------------------------------------------------------------------------- */ :root { /* Motion & geometry */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 30px; --radius-pill: 999px; --blur-panel: 24px; --blur-heavy: 40px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --motion-scale: 1; /* themes may slow/speed transitions */ /* Layout constants used by the timeline engine (JS reads these too) */ --track-header-w: 148px; --ruler-h: 34px; --track-h: 78px; --px-per-second: 28px; /* default horizontal zoom */ /* Typography stacks */ --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace; /* Default theme fallback = noir (applied before JS runs) */ color-scheme: dark; } /* --------------------------------------------------------------------------- 2. THEME: CINEMATIC NOIR (🎬 default / "grown-up" mode) Deep cobalt glass, subtle emerald/violet borders, technical typography. -------------------------------------------------------------------------- */ :root[data-theme='noir'], :root:not([data-theme]) { --canvas-bg: radial-gradient(1200px 700px at 12% -10%, rgba(56, 84, 189, 0.28), transparent 62%), radial-gradient(1000px 620px at 100% 0%, rgba(88, 58, 178, 0.24), transparent 58%), linear-gradient(160deg, #05060f 0%, #0a0d1e 42%, #060913 100%); --canvas-glow: rgba(96, 128, 255, 0.18); --panel-bg: rgba(16, 20, 40, 0.58); --panel-bg-strong: rgba(12, 16, 33, 0.82); --panel-border: rgba(122, 140, 220, 0.22); --panel-border-glow: rgba(96, 220, 190, 0.42); --surface-1: rgba(22, 27, 52, 0.55); --surface-2: rgba(30, 36, 68, 0.62); --surface-hover: rgba(46, 55, 100, 0.66); --text-primary: #eef1fb; --text-secondary: #b9c0e0; --text-muted: #7d86ad; --accent: #4fd1c5; /* emerald-cyan */ --accent-2: #8b7bf0; /* violet */ --accent-contrast: #04070f; --track-text: linear-gradient(90deg, #4fd1c5, #2f8f8a); --track-video: linear-gradient(90deg, #6f7bf7, #8b7bf0); --track-audio: linear-gradient(90deg, #38b2ac, #6d5bd0); --track-grid: rgba(150, 165, 235, 0.12); --playhead: #eaf6ff; --shadow-panel: 0 26px 70px -28px rgba(3, 6, 20, 0.92); --motion-scale: 1; } /* --------------------------------------------------------------------------- 3. THEME: KIDS CYBER-POP (🎨 "kids" mode) Radiant cyan accents, neon-pink track borders, energetic typography. -------------------------------------------------------------------------- */ :root[data-theme='kids'] { --canvas-bg: radial-gradient(1100px 680px at 8% -12%, rgba(0, 224, 255, 0.30), transparent 60%), radial-gradient(1000px 640px at 100% 4%, rgba(255, 79, 191, 0.26), transparent 58%), linear-gradient(155deg, #0a0a2a 0%, #171a52 45%, #0b1240 100%); --canvas-glow: rgba(0, 238, 255, 0.26); --panel-bg: rgba(28, 34, 92, 0.52); --panel-bg-strong: rgba(22, 28, 82, 0.80); --panel-border: rgba(120, 232, 255, 0.34); --panel-border-glow: rgba(255, 92, 200, 0.52); --surface-1: rgba(38, 46, 116, 0.55); --surface-2: rgba(52, 61, 140, 0.62); --surface-hover: rgba(74, 86, 176, 0.70); --text-primary: #f4fbff; --text-secondary: #c6e6ff; --text-muted: #8fb3dd; --accent: #22e6ff; /* radiant cyan */ --accent-2: #ff4fbf; /* neon pink */ --accent-contrast: #07042a; --track-text: linear-gradient(90deg, #ffd166, #ff8a3d); --track-video: linear-gradient(90deg, #22e6ff, #7a5cff); --track-audio: linear-gradient(90deg, #ff4fbf, #b34cff); --track-grid: rgba(160, 210, 255, 0.16); --playhead: #ffe66d; --shadow-panel: 0 26px 76px -26px rgba(10, 4, 60, 0.94); --motion-scale: 0.82; /* bouncier, snappier transitions */ } /* --------------------------------------------------------------------------- 4. THEME-AWARE TYPOGRAPHY & TRANSITION CHARACTER -------------------------------------------------------------------------- */ body { background: var(--canvas-bg) fixed; color: var(--text-primary); font-family: var(--font-body); transition: background 0.6s var(--ease-out), color 0.4s var(--ease-out); } /* Energetic type for Kids mode; technical/geometric for Noir */ :root[data-theme='kids'] .brand__title, :root[data-theme='kids'] h1, :root[data-theme='kids'] h2 { font-family: var(--font-display); letter-spacing: 0.4px; text-transform: none; background: linear-gradient(92deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme='noir'] .brand__title, :root[data-theme='noir'] h1, :root[data-theme='noir'] h2 { font-family: var(--font-mono); letter-spacing: 3px; text-transform: uppercase; color: var(--text-primary); } /* Neutralise theme-transition jitter for reduced-motion users */ @media (prefers-reduced-motion: reduce) { :root { --motion-scale: 0; } }