:root {
  color-scheme: dark;

  /* ---- Surfaces ---- */
  --bg: #0a0a0a;
  --surface: #0e0e0e;
  --surface-2: #151515;
  --surface-3: #1c1c1c;
  --surface-hover: #202020;
  --card-glass: linear-gradient(135deg, #223638 0%, #101a1b 100%);
  --card-glass-2: linear-gradient(135deg, #1c2440 0%, #10131f 100%);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(0, 228, 202, 0.4);

  /* ---- Text ---- */
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-tertiary: #707070;
  --text-muted: #4d4d4d;
  --text-on-accent: #062420;

  /* ---- Accent ---- */
  --accent: #00e4ca;
  --accent-bright: #2bf4dc;
  --accent-dim: rgba(0, 228, 202, 0.14);
  --accent-glow: rgba(0, 228, 202, 0.35);

  --mood-love: #fb7185;
  --mood-electro: #34d399;
  --mood-funk: #fbbf24;
  --mood-edm: #a78bfa;

  --danger: #f87171;

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 999px;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Typography ---- */
  --font-heading: 'IRANYekan', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'IRANYekan', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --rightrail-w: 320px;
  --topbar-h: 84px;
  --player-h: 88px;
  --shell-gap: 24px;
  --shell-radius: var(--radius-2xl);

  /*
   * index.html sets viewport-fit=cover, which lets the page draw under the iOS
   * notch/Dynamic Island and home-indicator area instead of the browser
   * reserving that space itself. That means WE have to reserve it: any fixed
   * edge element (topbar, player bar, drawer) needs these added to its
   * relevant padding or its content renders under the cutout / gesture zone.
   * The 0px fallback is required by the env() spec and keeps every consumer
   * a no-op on non-notch devices and desktop.
   */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Total space fixed-bottom siblings (main content, toasts) must reserve
     behind the player bar, including the safe area it now pads itself with. */
  --player-clearance: calc(var(--player-h) + var(--safe-bottom) + var(--space-6));

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-base: 320ms;
  --dur-slow: 480ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 8px 24px var(--accent-glow);

  --z-shell: 1;
  --z-rail: 5;
  --z-player: 20;
  --z-overlay: 30;
  --z-toast: 40;
}

:root[data-accent='purple'] {
  --accent: #8b5cf6;
  --accent-bright: #a78bfa;
  --accent-dim: rgba(139, 92, 246, 0.14);
  --accent-glow: rgba(139, 92, 246, 0.35);
  --text-on-accent: #f5f3ff;
}

:root[data-accent='pink'] {
  --accent: #ec4899;
  --accent-bright: #f472b6;
  --accent-dim: rgba(236, 72, 153, 0.14);
  --accent-glow: rgba(236, 72, 153, 0.35);
  --text-on-accent: #fff0f7;
}

:root[data-accent='amber'] {
  --accent: #f59e0b;
  --accent-bright: #fbbf24;
  --accent-dim: rgba(245, 158, 11, 0.14);
  --accent-glow: rgba(245, 158, 11, 0.35);
  --text-on-accent: #1a1200;
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f5f6;
  --surface: #ffffff;
  --surface-2: #f7f8f8;
  --surface-3: #eef0f1;
  --surface-hover: #e7e9ea;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --text-primary: #101314;
  --text-secondary: #55595a;
  --text-tertiary: #8a8f90;
  --text-muted: #b7bbbc;
  --card-glass: linear-gradient(135deg, #dff5f2 0%, #eef7f6 100%);
  --card-glass-2: linear-gradient(135deg, #e3e6fb 0%, #eef0fd 100%);
}