/* ============================================
   THEME SYSTEM — CSS Custom Properties
   Dark palette = default, light via data-theme
   ============================================ */

:root {
  /* ── Surfaces ── */
  --bg-primary: #1a1a1a;
  --bg-elevated: #2d2d2d;
  --bg-raised: #252525;
  --bg-subtle: rgba(255, 255, 255, 0.03);
  --bg-input: rgba(255, 255, 255, 0.06);
  --bg-input-hover: rgba(255, 255, 255, 0.08);
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-banner-from: #2C3E50;
  --bg-banner-to: #34495E;
  --bg-modal-from: #2a2a2a;
  --bg-modal-to: #1f1f1f;
  --bg-overlay: rgba(0, 0, 0, 0.85);
  --bg-tooltip: rgba(30, 30, 30, 0.95);
  --bg-loading: #121212;
  --bg-loading-card: #1E1E1E;

  /* ── Text ── */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.4);
  --text-disabled: rgba(255, 255, 255, 0.3);
  --text-placeholder: rgba(255, 255, 255, 0.35);
  --text-on-primary: #ffffff;
  --text-heading: rgba(255, 255, 255, 0.95);
  --text-subheading: #a0a0a0;
  --text-label: rgba(255, 255, 255, 0.85);
  --text-subtle: rgba(255, 255, 255, 0.45);

  /* ── Borders ── */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-normal: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);
  --border-muted: rgba(255, 255, 255, 0.1);
  --border-divider: #404040;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-panel: -4px 0 20px rgba(0, 0, 0, 0.1);

  /* ── Scrollbar ── */
  --scrollbar-thumb: rgba(255, 255, 255, 0.3);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.45);
  --scrollbar-track: transparent;

  /* ── Disabled button bg ── */
  --bg-btn-disabled-from: #3a3a3a;
  --bg-btn-disabled-to: #404040;

  /* ── File count badge ── */
  --bg-badge: #404040;

  /* ── Select option bg ── */
  --bg-option: #2a2a2a;

  /* ── Progress bar track ── */
  --bg-progress-track: #404040;

  /* ── Upload zone ── */
  --bg-upload-zone: #2d2d2d;
  --border-upload-zone: #404040;

  /* ── File preview border ── */
  --border-file-preview: rgba(255, 255, 255, 0.1);

  /* ── Fallback / loading ── */
  --text-loading-sub: #ccc;
  --text-trust: #999;
  --bg-fallback: rgba(21, 21, 21, 0.9);
  --text-fallback: #e0e0e0;

  /* ── Spinner ── */
  --spinner-track: rgba(255, 255, 255, 0.1);

  /* ── Strip separator ── */
  --text-separator: rgba(255, 255, 255, 0.2);

  /* ── Install steps ── */
  --text-steps-intro: rgba(255, 255, 255, 0.5);
  --text-icon-hint: rgba(255, 255, 255, 0.4);

  /* ── Lightbox ── */
  --bg-lightbox: rgba(0, 0, 0, 0.9);
  --bg-lightbox-btn: rgba(255, 255, 255, 0.2);
  --bg-lightbox-btn-hover: rgba(255, 255, 255, 0.3);
  --bg-lightbox-nav: rgba(0, 0, 0, 0.6);
  --bg-lightbox-nav-hover: rgba(0, 0, 0, 0.8);
  --border-lightbox-nav: rgba(255, 255, 255, 0.3);
  --border-lightbox-nav-hover: rgba(255, 255, 255, 0.5);

  /* ── Meta theme color ── */
  --theme-color: #1a1a1a;
}

/* ── Explicit dark (overrides auto-detect) ── */
[data-theme="dark"] {
  /* Same as :root — no overrides needed */
}

/* ── Light theme ── */
[data-theme="light"] {
  /* Surfaces */
  --bg-primary: #ffffff;
  --bg-elevated: #ebebeb;
  --bg-raised: #f5f5f5;
  --bg-subtle: rgba(0, 0, 0, 0.02);
  --bg-input: rgba(0, 0, 0, 0.07);
  --bg-input-hover: rgba(0, 0, 0, 0.10);
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-banner-from: #d6e4f7;
  --bg-banner-to: #e2ecf8;
  --bg-modal-from: #ffffff;
  --bg-modal-to: #f8f8f8;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-tooltip: rgba(255, 255, 255, 0.97);
  --bg-loading: #f0f0f0;
  --bg-loading-card: #ffffff;

  /* Text */
  --text-primary: #1a1a1a;
  --text-secondary: rgba(0, 0, 0, 0.6);
  --text-muted: rgba(0, 0, 0, 0.4);
  --text-disabled: rgba(0, 0, 0, 0.25);
  --text-placeholder: rgba(0, 0, 0, 0.3);
  --text-on-primary: #ffffff;
  --text-heading: rgba(0, 0, 0, 0.9);
  --text-subheading: #666666;
  --text-label: rgba(0, 0, 0, 0.75);
  --text-subtle: rgba(0, 0, 0, 0.4);

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.12);
  --border-normal: rgba(0, 0, 0, 0.18);
  --border-strong: rgba(0, 0, 0, 0.24);
  --border-muted: rgba(0, 0, 0, 0.12);
  --border-divider: #d4d4d4;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.20);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-panel: -4px 0 20px rgba(0, 0, 0, 0.08);

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

  /* Disabled button bg */
  --bg-btn-disabled-from: #e0e0e0;
  --bg-btn-disabled-to: #d5d5d5;

  /* File count badge */
  --bg-badge: #e0e0e0;

  /* Select option bg */
  --bg-option: #ffffff;

  /* Progress bar track */
  --bg-progress-track: #e0e0e0;

  /* Upload zone */
  --bg-upload-zone: #f5f5f5;
  --border-upload-zone: #d0d0d0;

  /* File preview border */
  --border-file-preview: rgba(0, 0, 0, 0.1);

  /* Fallback / loading */
  --text-loading-sub: #555;
  --text-trust: #888;
  --bg-fallback: rgba(255, 255, 255, 0.95);
  --text-fallback: #333333;

  /* Spinner */
  --spinner-track: rgba(0, 0, 0, 0.1);

  /* Strip separator */
  --text-separator: rgba(0, 0, 0, 0.15);

  /* Install steps */
  --text-steps-intro: rgba(0, 0, 0, 0.5);
  --text-icon-hint: rgba(0, 0, 0, 0.35);

  /* Lightbox */
  --bg-lightbox: rgba(0, 0, 0, 0.8);
  --bg-lightbox-btn: rgba(0, 0, 0, 0.15);
  --bg-lightbox-btn-hover: rgba(0, 0, 0, 0.25);
  --bg-lightbox-nav: rgba(0, 0, 0, 0.5);
  --bg-lightbox-nav-hover: rgba(0, 0, 0, 0.7);
  --border-lightbox-nav: rgba(0, 0, 0, 0.2);
  --border-lightbox-nav-hover: rgba(0, 0, 0, 0.4);

  /* Meta theme color */
  --theme-color: #ffffff;
}

/* ── Auto-detect: system light preference when no explicit theme set ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* Surfaces */
    --bg-primary: #ffffff;
    --bg-elevated: #ebebeb;
    --bg-raised: #f5f5f5;
    --bg-subtle: rgba(0, 0, 0, 0.02);
    --bg-input: rgba(0, 0, 0, 0.07);
    --bg-input-hover: rgba(0, 0, 0, 0.10);
    --bg-hover: rgba(0, 0, 0, 0.05);
    --bg-banner-from: #d6e4f7;
    --bg-banner-to: #e2ecf8;
    --bg-modal-from: #ffffff;
    --bg-modal-to: #f8f8f8;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-tooltip: rgba(255, 255, 255, 0.97);
    --bg-loading: #f0f0f0;
    --bg-loading-card: #ffffff;

    /* Text */
    --text-primary: #1a1a1a;
    --text-secondary: rgba(0, 0, 0, 0.6);
    --text-muted: rgba(0, 0, 0, 0.4);
    --text-disabled: rgba(0, 0, 0, 0.25);
    --text-placeholder: rgba(0, 0, 0, 0.3);
    --text-on-primary: #ffffff;
    --text-heading: rgba(0, 0, 0, 0.9);
    --text-subheading: #666666;
    --text-label: rgba(0, 0, 0, 0.75);
    --text-subtle: rgba(0, 0, 0, 0.4);

    /* Borders */
    --border-subtle: rgba(0, 0, 0, 0.12);
    --border-normal: rgba(0, 0, 0, 0.18);
    --border-strong: rgba(0, 0, 0, 0.24);
    --border-muted: rgba(0, 0, 0, 0.12);
    --border-divider: #d4d4d4;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.20);
    --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-panel: -4px 0 20px rgba(0, 0, 0, 0.08);

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

    /* Disabled button bg */
    --bg-btn-disabled-from: #e0e0e0;
    --bg-btn-disabled-to: #d5d5d5;

    /* File count badge */
    --bg-badge: #e0e0e0;

    /* Select option bg */
    --bg-option: #ffffff;

    /* Progress bar track */
    --bg-progress-track: #e0e0e0;

    /* Upload zone */
    --bg-upload-zone: #f5f5f5;
    --border-upload-zone: #d0d0d0;

    /* File preview border */
    --border-file-preview: rgba(0, 0, 0, 0.1);

    /* Fallback / loading */
    --text-loading-sub: #555;
    --text-trust: #888;
    --bg-fallback: rgba(255, 255, 255, 0.95);
    --text-fallback: #333333;

    /* Spinner */
    --spinner-track: rgba(0, 0, 0, 0.1);

    /* Strip separator */
    --text-separator: rgba(0, 0, 0, 0.15);

    /* Install steps */
    --text-steps-intro: rgba(0, 0, 0, 0.5);
    --text-icon-hint: rgba(0, 0, 0, 0.35);

    /* Lightbox */
    --bg-lightbox: rgba(0, 0, 0, 0.8);
    --bg-lightbox-btn: rgba(0, 0, 0, 0.15);
    --bg-lightbox-btn-hover: rgba(0, 0, 0, 0.25);
    --bg-lightbox-nav: rgba(0, 0, 0, 0.5);
    --bg-lightbox-nav-hover: rgba(0, 0, 0, 0.7);
    --border-lightbox-nav: rgba(0, 0, 0, 0.2);
    --border-lightbox-nav-hover: rgba(0, 0, 0, 0.4);

    /* Meta theme color */
    --theme-color: #ffffff;
  }
}