/* ============================================================
   Theme — CSS Custom Properties
   Light and dark themes with system preference detection
   ============================================================ */

:root {
  /* --- Colors: Light theme (default) --- */
  --color-bg:              #ffffff;
  --color-bg-secondary:    #f5f7fa;
  --color-bg-tertiary:     #e8ecf1;
  --color-text:            #1a1d23;
  --color-text-secondary:  #5a6170;
  --color-text-muted:      #8b92a0;
  --color-border:          #dce0e6;
  --color-primary:         #2563eb;
  --color-primary-hover:   #1d4ed8;
  --color-primary-light:   #dbeafe;
  --color-primary-text:    #ffffff;
  --color-success:         #16a34a;
  --color-success-bg:      #dcfce7;
  --color-error:           #dc2626;
  --color-error-bg:        #fef2f2;
  --color-warning:         #ea580c;
  --color-warning-bg:      #fff7ed;
  --color-shadow:          rgba(0, 0, 0, 0.08);
  --color-shadow-heavy:    rgba(0, 0, 0, 0.15);
  --color-overlay:         rgba(0, 0, 0, 0.5);

  /* --- Radii --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 2px var(--color-shadow);
  --shadow-md:  0 4px 12px var(--color-shadow);
  --shadow-lg:  0 8px 24px var(--color-shadow);

  /* --- Typography --- */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* --- Layout --- */
  --max-width:     1280px;
  --header-height: 64px;
}

/* --- Dark theme --- */
[data-theme="dark"] {
  --color-bg:              #0f1117;
  --color-bg-secondary:    #1a1d28;
  --color-bg-tertiary:     #252836;
  --color-text:            #e8eaed;
  --color-text-secondary:  #9aa0b0;
  --color-text-muted:      #62687a;
  --color-border:          #2e3344;
  --color-primary:         #3b82f6;
  --color-primary-hover:   #60a5fa;
  --color-primary-light:   #1e3a5f;
  --color-primary-text:    #ffffff;
  --color-success:         #22c55e;
  --color-success-bg:      #052e16;
  --color-error:           #ef4444;
  --color-error-bg:        #2d0b0b;
  --color-warning:         #f97316;
  --color-warning-bg:      #2d1708;
  --color-shadow:          rgba(0, 0, 0, 0.3);
  --color-shadow-heavy:    rgba(0, 0, 0, 0.5);
  --color-overlay:         rgba(0, 0, 0, 0.7);
}

/* --- System preference (only when no explicit choice made) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #0f1117;
    --color-bg-secondary:    #1a1d28;
    --color-bg-tertiary:     #252836;
    --color-text:            #e8eaed;
    --color-text-secondary:  #9aa0b0;
    --color-text-muted:      #62687a;
    --color-border:          #2e3344;
    --color-primary:         #3b82f6;
    --color-primary-hover:   #60a5fa;
    --color-primary-light:   #1e3a5f;
    --color-primary-text:    #ffffff;
    --color-success:         #22c55e;
    --color-success-bg:      #052e16;
    --color-error:           #ef4444;
    --color-error-bg:        #2d0b0b;
    --color-warning:         #f97316;
    --color-warning-bg:      #2d1708;
    --color-shadow:          rgba(0, 0, 0, 0.3);
    --color-shadow-heavy:    rgba(0, 0, 0, 0.5);
    --color-overlay:         rgba(0, 0, 0, 0.7);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}