/* ============================================
   Pixelius Design Tokens — Apple-style
   Light (default) + Dark theme
   ============================================ */

:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg-primary: #f5f5f7;
  --bg-secondary: #ececee;
  --bg-tertiary: #e3e3e6;
  --surface: #ffffff;
  --surface-hover: #fafafa;
  --surface-active: #f0f0f2;
  --surface-raised: #ffffff;

  /* Text */
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-muted: #98989d;
  --text-inverse: #ffffff;

  /* Accent */
  --accent: #007AFF;
  --accent-hover: #0066d6;
  --accent-active: #0055b3;
  --accent-bg: rgba(0, 122, 255, 0.08);
  --accent-bg-hover: rgba(0, 122, 255, 0.12);

  /* Status */
  --success: #34C759;
  --success-bg: rgba(52, 199, 89, 0.1);
  --warning: #FF9500;
  --warning-bg: rgba(255, 149, 0, 0.1);
  --error: #FF3B30;
  --error-bg: rgba(255, 59, 48, 0.1);
  --info: #5AC8FA;
  --info-bg: rgba(90, 200, 250, 0.1);

  /* Borders & Dividers */
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.15);
  --divider: rgba(0, 0, 0, 0.06);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);

  /* Overlay */
  --overlay: rgba(0, 0, 0, 0.3);
  --overlay-blur: 12px;

  /* Scrollbar */
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);

  /* Specific components */
  --tab-active-bg: rgba(0, 122, 255, 0.1);
  --tab-active-text: #007AFF;
  --queue-item-hover: rgba(0, 0, 0, 0.03);
  --queue-item-active: rgba(0, 122, 255, 0.06);
  --input-bg: #f5f5f7;
  --input-border: rgba(0, 0, 0, 0.1);
  --input-focus-border: #007AFF;
  --badge-bg: rgba(0, 0, 0, 0.06);
  --tooltip-bg: #1d1d1f;
  --tooltip-text: #ffffff;

  /* Progress */
  --progress-bg: rgba(0, 0, 0, 0.06);
  --progress-fill: #007AFF;

  /* Slider */
  --slider-track: rgba(0, 0, 0, 0.1);
  --slider-fill: #007AFF;
  --slider-thumb: #ffffff;
  --slider-thumb-border: rgba(0, 0, 0, 0.15);
  --slider-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary: #1c1c1e;
  --bg-secondary: #2c2c2e;
  --bg-tertiary: #3a3a3c;
  --surface: #2c2c2e;
  --surface-hover: #333335;
  --surface-active: #3a3a3c;
  --surface-raised: #3a3a3c;

  /* Text */
  --text-primary: #f5f5f7;
  --text-secondary: #98989d;
  --text-muted: #636366;
  --text-inverse: #1d1d1f;

  /* Accent */
  --accent: #0A84FF;
  --accent-hover: #409CFF;
  --accent-active: #0066CC;
  --accent-bg: rgba(10, 132, 255, 0.15);
  --accent-bg-hover: rgba(10, 132, 255, 0.22);

  /* Status */
  --success: #30D158;
  --success-bg: rgba(48, 209, 88, 0.15);
  --warning: #FF9F0A;
  --warning-bg: rgba(255, 159, 10, 0.15);
  --error: #FF453A;
  --error-bg: rgba(255, 69, 58, 0.15);
  --info: #64D2FF;
  --info-bg: rgba(100, 210, 255, 0.15);

  /* Borders & Dividers */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --divider: rgba(255, 255, 255, 0.06);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* Overlay */
  --overlay: rgba(0, 0, 0, 0.5);

  /* Scrollbar */
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);

  /* Specific components */
  --tab-active-bg: rgba(10, 132, 255, 0.2);
  --tab-active-text: #0A84FF;
  --queue-item-hover: rgba(255, 255, 255, 0.04);
  --queue-item-active: rgba(10, 132, 255, 0.12);
  --input-bg: #1c1c1e;
  --input-border: rgba(255, 255, 255, 0.1);
  --input-focus-border: #0A84FF;
  --badge-bg: rgba(255, 255, 255, 0.1);
  --tooltip-bg: #f5f5f7;
  --tooltip-text: #1d1d1f;

  /* Progress */
  --progress-bg: rgba(255, 255, 255, 0.08);
  --progress-fill: #0A84FF;

  /* Slider */
  --slider-track: rgba(255, 255, 255, 0.1);
  --slider-fill: #0A84FF;
  --slider-thumb: #3a3a3c;
  --slider-thumb-border: rgba(255, 255, 255, 0.2);
  --slider-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ============================================
   HiDPI / Multi-resolution Support
   ============================================ */

/* FullHD (1920×1080) — base 16px */
html {
  font-size: 16px;
}

/* 2K (2560×1440) */
@media (min-width: 2400px) {
  html { font-size: 18px; }
}

/* 4K (3840×2160) */
@media (min-width: 3600px) {
  html { font-size: 22px; }
}

/* High DPR screens that report smaller logical width */
@media (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 2200px) {
  html { font-size: 18px; }
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 3200px) {
  html { font-size: 22px; }
}