/* video_studio/tokens.css — Editing Room dark surface tokens (Phase 1 reskin).
 *
 * An NLE is a dark surface; light editor chrome is an anti-pattern for
 * colour-critical work. The `--vs-*` palette below is the source of truth
 * (the Editing Room token namespace, aligned with .ga-app's lime accent but
 * darker). The legacy `--*` names that base.css + the page markup already
 * reference are remapped onto the `--vs-*` palette, so the whole editor goes
 * dark without touching the base.css slice. Reverting this one file restores
 * the original light surface.
 *
 * (The universal reset below + the closing of this :root block were a single
 * rule in the original monolith; the Phase 1 split cut it across files, so the
 * matching `}` previously sat at the top of base.css — it has been removed
 * there now that this :root block is self-contained.) */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            /* ---- Editing Room palette (source of truth) ---- */
            --vs-bg-page: #0e1013;
            --vs-bg-panel: #15181d; --vs-bg-panel-alt: #1a1e24; --vs-bg-card: #1d2129; --vs-bg-input: #262b33; --vs-bg-hover: #2a313b;
            --vs-timeline-bg: #111419; --vs-timeline-track: #1e232b; --vs-timeline-ruler: #2c333d;
            --vs-brand-primary: #8DC63F; --vs-brand-secondary: #22b8cf; --vs-brand-accent: #10b981;
            --vs-text-primary: #e9ebee; --vs-text-secondary: #a7adb7; --vs-text-muted: #6c7480; --vs-text-on-dark: #ffffff;
            --vs-border-light: rgba(255, 255, 255, 0.08); --vs-border-medium: rgba(255, 255, 255, 0.15);
            --vs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --vs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
            --vs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55); --vs-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);

            /* ---- Legacy names remapped onto the dark palette (no base.css edits) ---- */
            --gradient-bg: var(--vs-bg-page);
            --bg-panel: var(--vs-bg-panel); --bg-panel-alt: var(--vs-bg-panel-alt); --bg-card: var(--vs-bg-card); --bg-input: var(--vs-bg-input); --bg-hover: var(--vs-bg-hover);
            --timeline-bg: var(--vs-timeline-bg); --timeline-track: var(--vs-timeline-track); --timeline-ruler: var(--vs-timeline-ruler);
            --brand-primary: var(--vs-brand-primary); --brand-secondary: var(--vs-brand-secondary); --brand-accent: var(--vs-brand-accent);
            --track-main: #3b82f6; --track-broll: #10b981; --track-overlay: #f59e0b;
            --track-audio-music: #ec4899; --track-audio-voice: #8DC63F; --track-audio-sfx: #06b6d4;
            --track-text: #f97316; --track-effect: #14b8a6;
            --text-primary: var(--vs-text-primary); --text-secondary: var(--vs-text-secondary); --text-muted: var(--vs-text-muted); --text-on-dark: var(--vs-text-on-dark);
            --border-light: var(--vs-border-light); --border-medium: var(--vs-border-medium);
            --shadow-sm: var(--vs-shadow-sm); --shadow-md: var(--vs-shadow-md); --shadow-lg: var(--vs-shadow-lg); --shadow-xl: var(--vs-shadow-xl);
            --font-display: 'Plus Jakarta Sans', sans-serif; --font-body: 'DM Sans', sans-serif;
            --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
        }

/* Light theme — only the --vs-* source values are overridden; the legacy --*
 * names (remapped to var(--vs-*) in :root) follow automatically. Applied via
 * html[data-theme="light"], which the server renders by default from users.theme
 * (light is the MyAvatar brand default; dark is opt-in). The :root block above
 * holds the dark source values, used only when data-theme is 'dark'. */
html[data-theme="light"] {
    --vs-bg-page: #fafaf7;
    --vs-bg-panel: #ffffff; --vs-bg-panel-alt: #f4f4f0; --vs-bg-card: #ffffff; --vs-bg-input: #eef0ea; --vs-bg-hover: #f0f5e4;
    --vs-timeline-bg: #e9e9e3; --vs-timeline-track: #f3f3ee; --vs-timeline-ruler: #d6d6ce;
    --vs-brand-primary: #78B41E; --vs-brand-secondary: #1f9aab; --vs-brand-accent: #10b981;
    --vs-text-primary: #2a2a28; --vs-text-secondary: #6a6a66; --vs-text-muted: #9a9a92; --vs-text-on-dark: #ffffff;
    --vs-border-light: rgba(0, 0, 0, 0.08); --vs-border-medium: rgba(0, 0, 0, 0.14);
    --vs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --vs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --vs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12); --vs-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}