/**
 * JavStudio Video Tube Design System
 * Colors and typography directly matched with javstudio.net
 */

:root {
  /* JavStudio Brand Colors */
  --color-primary: #e41b64;
  --color-primary-hover: #ff2a7a;
  --color-primary-active: #c51252;
  --color-primary-glow: rgba(228, 27, 100, 0.35);
  --color-primary-subtle: rgba(228, 27, 100, 0.12);

  /* JavStudio Secondary Accent (Cyan / Teal) */
  --color-accent: #00acad;
  --color-accent-hover: #00c7c8;
  --color-accent-active: #008f90;
  --color-accent-glow: rgba(0, 172, 173, 0.35);
  --color-accent-subtle: rgba(0, 172, 173, 0.12);

  /* Functional Status Colors */
  --color-success: #2ecc71;
  --color-warning: #f39c12;
  --color-danger: #e74c3c;
  --color-info: #3498db;
  --color-gold: #ffd166;

  /* Dark Theme Surfaces (Default: Midnight Studio) */
  --bg-base: #0a0b0f;
  --bg-header: rgba(13, 14, 20, 0.95);
  --bg-sidebar: #0f1118;
  --bg-surface: #141620;
  --bg-card: #191c28;
  --bg-card-hover: #212536;
  --bg-input: #1a1d2a;
  --bg-overlay: rgba(5, 6, 9, 0.85);

  /* Borders */
  --border-subtle: #242838;
  --border-card: #282d3f;
  --border-hover: #e41b64;
  --border-active: #00acad;

  /* Typography */
  --text-primary: #ffffff;
  --text-secondary: #aab2c8;
  --text-muted: #6e768e;
  --text-inverse: #0a0b0f;
  --text-accent: #e41b64;
  --text-cyan: #00acad;

  /* Font Families */
  --font-brand: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout dimensions */
  --header-height: 64px;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 72px;
  --content-max-width: 1720px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-glow-pink: 0 0 20px rgba(228, 27, 100, 0.4);
  --shadow-glow-cyan: 0 0 20px rgba(0, 172, 173, 0.4);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* AMOLED Pure Black Theme */
body[data-theme="amoled"] {
  --bg-base: #000000;
  --bg-header: rgba(0, 0, 0, 0.96);
  --bg-sidebar: #060606;
  --bg-surface: #0c0c0c;
  --bg-card: #121212;
  --bg-card-hover: #1a1a1a;
  --bg-input: #111111;
  --border-subtle: #1e1e1e;
  --border-card: #222222;
}

/* Cyber Magenta Glow Theme */
body[data-theme="cyber"] {
  --bg-base: #0a040d;
  --bg-header: rgba(16, 6, 21, 0.95);
  --bg-sidebar: #120718;
  --bg-surface: #180920;
  --bg-card: #200d2b;
  --bg-card-hover: #2d133c;
  --bg-input: #1e0d29;
  --border-subtle: #3a154e;
  --border-card: #45195e;
  --border-hover: #ff2a7a;
}