/*
 * VibeVision design tokens: "Liquid Glass cinema".
 * Dark is the stage (an ambient aurora under translucent glass); light is a
 * soft daylight variant of the same system. `data-theme` on <html> pins an
 * appearance, otherwise the system preference wins.
 */
:root {
  color-scheme: light;

  /* Signature gradient: warm amber → coral → violet ("the vibe") */
  --vibe-1: #ffb340;
  --vibe-2: #ff6b5a;
  --vibe-3: #9d6bff;
  --vibe-gradient: linear-gradient(120deg, var(--vibe-1) 0%, var(--vibe-2) 48%, var(--vibe-3) 100%);
  --vibe-gradient-soft: linear-gradient(120deg, rgba(255, 179, 64, 0.16), rgba(255, 107, 90, 0.14) 48%, rgba(157, 107, 255, 0.16));
  --vibe-conic: conic-gradient(from var(--spin, 0deg), var(--vibe-1), var(--vibe-2), var(--vibe-3), var(--vibe-1));

  /* Accent (solid) for focus, selection and links */
  --brand: #e8622f;
  --brand-strong: #cc4d1c;
  --brand-soft: rgba(232, 98, 47, 0.12);
  --brand-line: rgba(232, 98, 47, 0.38);
  --on-brand: #ffffff;
  --brand-gradient: var(--vibe-gradient);
  --gold: #c9973f;

  /* Backgrounds */
  --bg: #f4f3f7;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eeedf3;
  --bg-grouped: #f4f3f7;
  --bg-elevated: #ffffff;
  --canvas: #eceaf1;
  --canvas-dot: rgba(60, 50, 90, 0.16);
  --ambient-1: rgba(255, 170, 90, 0.32);
  --ambient-2: rgba(255, 110, 140, 0.22);
  --ambient-3: rgba(140, 120, 255, 0.24);

  /* Labels */
  --label: #16151c;
  --label-2: rgba(40, 36, 60, 0.74);
  --label-3: rgba(40, 36, 60, 0.52);
  --label-4: rgba(40, 36, 60, 0.3);

  /* Fills */
  --fill: rgba(110, 100, 140, 0.2);
  --fill-2: rgba(110, 100, 140, 0.14);
  --fill-3: rgba(110, 100, 140, 0.1);
  --fill-4: rgba(110, 100, 140, 0.06);
  --hover: rgba(40, 30, 80, 0.05);
  --pressed: rgba(40, 30, 80, 0.09);

  /* Separators */
  --separator: rgba(40, 30, 80, 0.1);
  --separator-strong: rgba(40, 30, 80, 0.18);

  /* System tints */
  --red: #f0384f;
  --orange: #ff8a1f;
  --yellow: #f5b70a;
  --green: #22b35e;
  --mint: #0fbf9b;
  --teal: #0ea5c6;
  --blue: #2f7bff;
  --indigo: #5b5cf0;
  --purple: #9b4dff;
  --pink: #f0458f;
  --gray: #8a889a;

  /* Node type tints */
  --tint-text: var(--indigo);
  --tint-image: var(--teal);
  --tint-video: var(--orange);
  --tint-audio: var(--pink);
  --tint-character: #ff7a45;
  --tint-scene: var(--green);
  --tint-storyboard: var(--purple);
  --tint-screening: var(--red);
  --tint-director: #d6ac60;

  /* Liquid glass */
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-edge: rgba(30, 20, 60, 0.08);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
  --glass-blur: saturate(190%) blur(28px);
  --material-thin: rgba(255, 255, 255, 0.5);
  --material: var(--glass);
  --material-thick: var(--glass-strong);
  --material-blur: var(--glass-blur);
  --material-border: var(--glass-edge);

  /* Shadows: soft, layered, slightly tinted */
  --shadow-1: 0 1px 2px rgba(30, 20, 60, 0.06), 0 2px 6px rgba(30, 20, 60, 0.05);
  --shadow-2: 0 2px 6px rgba(30, 20, 60, 0.06), 0 12px 28px rgba(30, 20, 60, 0.1);
  --shadow-3: 0 4px 12px rgba(30, 20, 60, 0.08), 0 24px 56px rgba(30, 20, 60, 0.16);
  --shadow-4: 0 8px 24px rgba(30, 20, 60, 0.1), 0 40px 100px rgba(30, 20, 60, 0.26);
  --glow: 0 8px 28px rgba(255, 107, 90, 0.35), 0 2px 8px rgba(157, 107, 255, 0.25);
  --ring: 0 0 0 3px rgba(232, 98, 47, 0.28);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-hero: 700 clamp(44px, 7vw, 84px) / 1.04 var(--font-display);
  --t-large: 700 34px/1.15 var(--font-display);
  --t-title1: 700 28px/1.2 var(--font-display);
  --t-title2: 650 22px/1.27 var(--font-display);
  --t-title3: 650 19px/1.3 var(--font-display);
  --t-headline: 600 15px/1.4 var(--font);
  --t-body: 400 15px/1.5 var(--font);
  --t-callout: 400 14px/1.45 var(--font);
  --t-subhead: 400 13px/1.4 var(--font);
  --t-footnote: 400 12px/1.35 var(--font);
  --t-caption: 400 11px/1.3 var(--font);
  --tracking-tight: -0.02em;

  /* Shape (generous, concentric) */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* Spacing (4pt grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Controls */
  --control-h: 34px;
  --control-h-sm: 28px;
  --control-h-lg: 44px;
  --hit: 30px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --d-fast: 140ms;
  --d: 240ms;
  --d-slow: 420ms;

  /* Layout */
  --sidebar-w: 248px;
  --toolbar-h: 56px;
  --studio-nav-w: 256px;
  --studio-side-w: 376px;
  --inset: 10px;

  /* Film grain (tiny SVG noise, tiled) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-opacity: 0.035;
}

@media (pointer: coarse) {
  :root {
    --hit: 44px;
    --control-h: 42px;
  }
}

/* ---------- Dark: the cinema ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #ff9a5c;
    --brand-strong: #ffb27e;
    --brand-soft: rgba(255, 154, 92, 0.15);
    --brand-line: rgba(255, 154, 92, 0.42);
    --on-brand: #1c0d04;
    --bg: #07070b;
    --bg-secondary: #13131a;
    --bg-tertiary: #1b1b24;
    --bg-grouped: #07070b;
    --bg-elevated: #17171f;
    --canvas: #0a0a0f;
    --canvas-dot: rgba(220, 210, 255, 0.11);
    --ambient-1: rgba(255, 150, 60, 0.22);
    --ambient-2: rgba(255, 80, 120, 0.16);
    --ambient-3: rgba(120, 90, 255, 0.24);
    --label: #f6f4fb;
    --label-2: rgba(236, 232, 250, 0.72);
    --label-3: rgba(236, 232, 250, 0.5);
    --label-4: rgba(236, 232, 250, 0.28);
    --fill: rgba(160, 150, 200, 0.26);
    --fill-2: rgba(160, 150, 200, 0.2);
    --fill-3: rgba(160, 150, 200, 0.14);
    --fill-4: rgba(160, 150, 200, 0.08);
    --hover: rgba(255, 255, 255, 0.06);
    --pressed: rgba(255, 255, 255, 0.1);
    --separator: rgba(236, 232, 250, 0.09);
    --separator-strong: rgba(236, 232, 250, 0.17);
    --red: #ff5468;
    --orange: #ffa13d;
    --yellow: #ffd23f;
    --green: #3fd77f;
    --mint: #3ee6c1;
    --teal: #35d0ec;
    --blue: #5c9bff;
    --indigo: #8f8cff;
    --purple: #bb7bff;
    --pink: #ff6fb0;
    --gray: #9c9aae;
    --tint-character: #ff8c5a;
    --glass: rgba(36, 35, 49, 0.6);
    --glass-strong: rgba(34, 33, 46, 0.82);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-edge: rgba(255, 255, 255, 0.11);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --material-thin: rgba(26, 25, 36, 0.45);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 32px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.4), 0 26px 60px rgba(0, 0, 0, 0.55);
    --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.45), 0 44px 110px rgba(0, 0, 0, 0.65);
    --glow: 0 8px 30px rgba(255, 107, 90, 0.38), 0 2px 10px rgba(157, 107, 255, 0.32);
    --ring: 0 0 0 3px rgba(255, 154, 92, 0.32);
    --grain-opacity: 0.06;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #ff9a5c;
  --brand-strong: #ffb27e;
  --brand-soft: rgba(255, 154, 92, 0.15);
  --brand-line: rgba(255, 154, 92, 0.42);
  --on-brand: #1c0d04;
  --bg: #07070b;
  --bg-secondary: #13131a;
  --bg-tertiary: #1b1b24;
  --bg-grouped: #07070b;
  --bg-elevated: #17171f;
  --canvas: #0a0a0f;
  --canvas-dot: rgba(220, 210, 255, 0.11);
  --ambient-1: rgba(255, 150, 60, 0.22);
  --ambient-2: rgba(255, 80, 120, 0.16);
  --ambient-3: rgba(120, 90, 255, 0.24);
  --label: #f6f4fb;
  --label-2: rgba(236, 232, 250, 0.72);
  --label-3: rgba(236, 232, 250, 0.5);
  --label-4: rgba(236, 232, 250, 0.28);
  --fill: rgba(160, 150, 200, 0.26);
  --fill-2: rgba(160, 150, 200, 0.2);
  --fill-3: rgba(160, 150, 200, 0.14);
  --fill-4: rgba(160, 150, 200, 0.08);
  --hover: rgba(255, 255, 255, 0.06);
  --pressed: rgba(255, 255, 255, 0.1);
  --separator: rgba(236, 232, 250, 0.09);
  --separator-strong: rgba(236, 232, 250, 0.17);
  --red: #ff5468;
  --orange: #ffa13d;
  --yellow: #ffd23f;
  --green: #3fd77f;
  --mint: #3ee6c1;
  --teal: #35d0ec;
  --blue: #5c9bff;
  --indigo: #8f8cff;
  --purple: #bb7bff;
  --pink: #ff6fb0;
  --gray: #9c9aae;
  --tint-character: #ff8c5a;
  --glass: rgba(36, 35, 49, 0.6);
  --glass-strong: rgba(34, 33, 46, 0.82);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-edge: rgba(255, 255, 255, 0.11);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  --material-thin: rgba(26, 25, 36, 0.45);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 32px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.4), 0 26px 60px rgba(0, 0, 0, 0.55);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.45), 0 44px 110px rgba(0, 0, 0, 0.65);
  --glow: 0 8px 30px rgba(255, 107, 90, 0.38), 0 2px 10px rgba(157, 107, 255, 0.32);
  --ring: 0 0 0 3px rgba(255, 154, 92, 0.32);
  --grain-opacity: 0.06;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d: 0ms;
    --d-slow: 0ms;
  }
}
:root[data-motion="reduced"] {
  --d-fast: 0ms;
  --d: 0ms;
  --d-slow: 0ms;
}

@property --spin {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}