/* ====================================================
   SyncStream - SQUAP (d.html) Inspired Glassmorphism Design System
   ==================================================== */

:root {
  --page: #08090d;
  --bg-surface: rgba(20, 20, 24, 0.9);
  --glass-blur: blur(20px);
  --font-sans: 'Sora', 'Vazirmatn', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Vazirmatn', system-ui, -apple-system, sans-serif;
  --font-persian: 'Vazirmatn', system-ui, -apple-system, sans-serif;

  --text-main: rgba(255, 255, 255, 0.9);
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.65);
  --text-dim: rgba(255, 255, 255, 0.4);
  --border-subtle: rgba(255, 255, 255, 0.07);

  --glass-bg: rgba(10, 10, 12, 0.62);
  --glass-bg-card: rgba(14, 15, 20, 0.68);
  --glass-bg-elevated: rgba(22, 24, 32, 0.72);
  --glass-bg-input: rgba(8, 8, 10, 0.85);

  --glass-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 -1px 1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.4);
  --glass-card-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08);

  --axis-bg: #08090e;
  --axis-line: rgba(255, 255, 255, 0.04);
  --axis-tick: rgba(255, 255, 255, 0.8);
  --theme-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Accent: SQUAP Electric Blue (default) */
  --accent-main: #3650fd;
  --accent-main-glow: rgba(54, 80, 253, 0.3);
  --accent-glow: rgba(68, 92, 254, 0.8);
  --accent-glow-subtle: rgba(68, 92, 254, 0.28);
  --theme-btn-border: rgba(68, 92, 254, 0.4);
  --theme-badge-bg: rgba(68, 92, 254, 0.14);
  --theme-badge-color: #7c9dff;
  --theme-badge-border: rgba(68, 92, 254, 0.28);
  --glow: var(--accent-glow);

  /* Functional Status Tokens */
  --accent-green: #10b981;
  --accent-green-glow: rgba(16, 185, 129, 0.4);
  --accent-red: #ef4444;
  --accent-red-glow: rgba(239, 68, 68, 0.35);
  --accent-amber: #f59e0b;

  /* SQUAP Rounded Tokens */
  --radius-pill: 9999px;
  --radius-2xl: 24px;
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;

  /* Subtitle Custom Variables */
  --sub-font: 'Vazirmatn', sans-serif;
  --sub-font-size: 20px;
  --sub-color: #fde047;
  --sub-bg: rgba(0, 0, 0, 0.75);
  --sub-shadow: 0 2px 4px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.95);
  --sub-bottom: 36px;
}