/* ═══════════════════════════════════════════════════════════════
   Versionary Design Tokens — v2 Refresh
   Palette A (Refined Violet) · Geist + JetBrains Mono
   ═══════════════════════════════════════════════════════════════ */

/* ===== TYPOGRAPHY ===== */
:root {
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Type scale — minimum 9px for labels */
  --text-2xs: 9px;    /* labels, badges, meta */
  --text-xs: 10px;    /* secondary info, mono data */
  --text-sm: 11px;    /* body small, UI labels */
  --text-base: 12px;  /* body text */
  --text-md: 13px;    /* body medium */
  --text-lg: 15px;    /* headings small */
  --text-xl: 18px;    /* headings medium */
  --text-2xl: 22px;   /* headings large */
  --text-3xl: 28px;   /* display */

  /* Border radius scale */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-pill: 20px;
  --radius-full: 9999px;

  /* Glass — consistent everywhere */
  --glass-blur-sm: blur(8px);
  --glass-blur-md: blur(16px);
  --glass-blur-lg: blur(24px);

  /* Spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  /* Pill bar (light mode) */
  --root-bg: #f0ebe0;
  --console-bg: #f5f2ec;
  --console-border: rgba(0,0,0,0.06);
  --text-primary: #1a1a2e;
  --text-secondary: rgba(0,0,0,0.5);
  --text-tertiary: rgba(0,0,0,0.25);
  --border-light: rgba(0,0,0,0.06);
  --border-medium: rgba(0,0,0,0.12);
  --btn-secondary-bg: rgba(255,255,255,0.6);
  --btn-secondary-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --pill-bar-bg: rgba(0,0,0,0.03);
  --pill-bar-border: rgba(0,0,0,0.04);
  --pill-divider: rgba(0,0,0,0.06);
  --pill-toggle-tray: rgba(0,0,0,0.03);
  --user-bubble-bg: rgba(124,106,239,0.08);
  --dot-grid: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
  --dot-grid-size: 20px 20px;
}

/* ===== LIGHT MODE (default) ===== */
:root {
  /* Backgrounds */
  --th-bg: #f2f0eb;
  --th-sf: #ffffff;
  --th-sf2: #faf9f6;
  --th-sf3: #f5f4ef;

  /* Borders */
  --th-b: rgba(0,0,0,0.10);
  --th-b-subtle: rgba(0,0,0,0.06);
  --th-b-interactive: rgba(0,0,0,0.12);

  /* Text */
  --th-tx: #1c1b1f;
  --th-tx2: rgba(28,27,31,0.72);
  --th-tx3: rgba(28,27,31,0.50);
  --th-tx4: rgba(28,27,31,0.32);

  /* Accent — Refined Violet */
  --th-accent: #6c5ce7;
  --th-accent-bg: rgba(91,83,209,0.12);

  /* Sidebar accent (LOCALIZE) */
  --th-sidebar-accent: #6c5ce7;

  /* Pipeline step colors */
  --step-batch: #6c5ce7;
  --step-preview: #34d399;
  --step-titles: #fbbf24;
  --step-localize: #60a5fa;
  --step-export: #6c5ce7;

  /* Semantic colors */
  --th-green: #34d399;
  --th-green-bg: rgba(52,211,153,0.14);
  --th-orange: #fbbf24;
  --th-orange-bg: rgba(251,191,36,0.14);
  --th-red: #ef4444;
  --th-red-bg: rgba(239,68,68,0.12);
  --th-purple: #7c6aef;
  --th-purple-bg: rgba(124,106,239,0.12);
  --th-pink: #db2777;
  --th-pink-bg: rgba(219,39,119,0.12);
  --th-blue: #60a5fa;
  --th-blue-bg: rgba(96,165,250,0.12);
  --th-teal: #2dd4bf;
  --th-teal-bg: rgba(45,212,191,0.12);

  /* File type colors */
  --ft-video: #34d399;
  --ft-matrix: #60a5fa;
  --ft-images: #7c6aef;
  --ft-audio: #ef4444;
  --ft-psd: #fbbf24;

  /* Segment bar shot types */
  --seg-dialogue: #34d399;
  --seg-vo: #60a5fa;
  --seg-super: #fbbf24;

  /* Pipeline graph */
  --th-edge: rgba(0,0,0,0.12);
  --th-edge-live: #7c6aef;
  --th-node-bg: #ffffff;
  --th-node-stroke: rgba(0,0,0,0.10);
  --th-shadow: 0 6px 18px rgba(0,0,0,0.10);

  /* Status dots */
  --th-dot-done: #16a34a;
  --th-dot-active: #7c6aef;
  --th-dot-wait: rgba(0,0,0,0.20);

  /* Glass */
  --glass-bg: rgba(255,255,255,0.85);
  --glass-border: rgba(0,0,0,0.08);
  --glass-card-bg: rgba(255,255,255,0.60);
  --glass-card-border: rgba(0,0,0,0.06);

  /* Toggle surfaces (glassmorphic) */
  --th-tgl: rgba(255,255,255,0.5);
  --th-tgla: rgba(255,255,255,0.7);
  --th-tgl-border: rgba(0,0,0,0.06);

  /* Sidebar surface */
  --th-sidebar-bg: rgba(248,247,244,0.75);

  /* Dot grid background — needs BOTH dimensions (20px 20px). A single 20px value
     = width 20px, height auto, which for a gradient means full element height, so
     the dots only tile horizontally (one centered row) instead of a full grid. */
  --dot-grid: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
  --dot-grid-size: 20px 20px;

  /* Ambient glow (drag/hover) */
  --glow-idle: none;
  --glow-active: 0 0 10px rgba(91,83,209,0.2), 0 0 30px rgba(91,83,209,0.1), 0 0 60px rgba(91,83,209,0.05), inset 0 0 12px rgba(91,83,209,0.04);
}

/* ===== DARK MODE ===== */
body.dark-mode {
  /* Backgrounds — cool black */
  --th-bg: #0a0a0f;
  --th-sf: #131318;
  --th-sf2: #1c1c23;
  --th-sf3: #25252e;

  /* Borders */
  --th-b: rgba(255,255,255,0.06);
  --th-b-subtle: rgba(255,255,255,0.04);
  --th-b-interactive: rgba(255,255,255,0.08);

  /* Text */
  --th-tx: #f0f0f3;
  --th-tx2: rgba(240,240,243,0.72);
  --th-tx3: rgba(240,240,243,0.50);
  --th-tx4: rgba(240,240,243,0.30);

  /* Accent — Refined Violet */
  --th-accent: #7c6aef;
  --th-accent-bg: rgba(124,106,239,0.14);
  --user-bubble-bg: rgba(124,106,239,0.12);

  /* Sidebar accent */
  --th-sidebar-accent: #60a5fa;

  /* Pipeline step colors */
  --step-batch: #7c6aef;
  --step-preview: #34d399;
  --step-titles: #fbbf24;
  --step-localize: #60a5fa;
  --step-export: #7c6aef;

  /* Semantic colors */
  --th-green: #34d399;
  --th-green-bg: rgba(52,211,153,0.14);
  --th-orange: #fbbf24;
  --th-orange-bg: rgba(251,191,36,0.14);
  --th-red: #ef4444;
  --th-red-bg: rgba(239,68,68,0.14);
  --th-purple: #7c6aef;
  --th-purple-bg: rgba(124,106,239,0.14);
  --th-pink: #f472b6;
  --th-pink-bg: rgba(244,114,182,0.14);
  --th-blue: #60a5fa;
  --th-blue-bg: rgba(96,165,250,0.14);
  --th-teal: #2dd4bf;
  --th-teal-bg: rgba(45,212,191,0.14);

  /* File type colors */
  --ft-video: #34d399;
  --ft-matrix: #60a5fa;
  --ft-images: #7c6aef;
  --ft-audio: #ef4444;
  --ft-psd: #fbbf24;

  /* Segment bar shot types */
  --seg-dialogue: #34d399;
  --seg-vo: #60a5fa;
  --seg-super: #fbbf24;

  /* Pipeline graph */
  --th-edge: rgba(255,255,255,0.08);
  --th-edge-live: #7c6aef;
  --th-node-bg: #131318;
  --th-node-stroke: rgba(255,255,255,0.08);
  --th-shadow: 0 8px 24px rgba(0,0,0,0.45);

  /* Status dots */
  --th-dot-done: #34d399;
  --th-dot-active: #7c6aef;
  --th-dot-wait: rgba(255,255,255,0.20);

  /* Glass */
  --glass-bg: rgba(13,13,18,0.85);
  --glass-border: rgba(255,255,255,0.06);
  --glass-card-bg: rgba(255,255,255,0.04);
  --glass-card-border: rgba(255,255,255,0.06);

  /* Toggle surfaces (glassmorphic) */
  --th-tgl: rgba(255,255,255,0.04);
  --th-tgla: rgba(255,255,255,0.08);
  --th-tgl-border: rgba(255,255,255,0.08);

  /* Sidebar surface */
  --th-sidebar-bg: rgba(13,13,18,0.75);

  /* Dot grid background — original resting value */
  --dot-grid: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  --dot-grid-size: 20px 20px;

  /* Console shell (dark mode) — shell deepened to #08080c to lift the
     console card off the shell for stronger dark-mode contrast */
  --root-bg: #08080c;
  --console-bg: #101018;
  --console-border: rgba(255,255,255,0.10);
  --border-light: rgba(255,255,255,0.06);
  --btn-secondary-bg: rgba(255,255,255,0.04);
  --btn-secondary-shadow: none;

  /* Ambient glow (drag/hover) */
  --glow-idle: none;
  --glow-active: 0 0 10px rgba(124,106,239,0.2), 0 0 30px rgba(124,106,239,0.1), 0 0 60px rgba(124,106,239,0.05), inset 0 0 12px rgba(124,106,239,0.04);
}

/* Processing spinner */
.batch-spinner {
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: batchSpin 0.6s linear infinite;
}
@keyframes batchSpin { to { transform: rotate(360deg); } }