/* ============================================================
   PcKonfiguratorius Theme System — theme-system.css
   Defines CSS custom properties for all 6 themes.
   Used by: builder.php, checkout.php, and all info pages.
   ============================================================ */

/* ── DARK (default) ───────────────────────────────────────── */
:root,
html,
html.dark {
  --bg-base:        #0d0d0f;
  --bg-surface:     #111115;
  --bg-card:        #16161a;
  --bg-card-hover:  #1c1c22;
  --bg-input:       #1a1a1f;
  --bg-elevated:    #1e1e24;

  --text-primary:   #f0f0f5;
  --text-secondary: #a8a8b8;
  --text-muted:     #6b6b7e;
  --text-disabled:  #3a3a4a;

  --border-default: #2a2a35;
  --border-subtle:  #1e1e28;
  --border-focus:   #6366f1;
  --border-hover:   #3a3a4a;

  --accent-indigo:  #6366f1;
  --accent-purple:  #8b5cf6;
  --accent-cyan:    #06b6d4;
  --accent-green:   #10b981;
  --accent-yellow:  #f59e0b;
  --accent-red:     #ef4444;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;

  color-scheme: dark;
}

/* ── LIGHT ────────────────────────────────────────────────── */
html.light {
  --bg-base:        #f5f5f7;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f8f8fc;
  --bg-input:       #f0f0f5;
  --bg-elevated:    #ffffff;

  --text-primary:   #0d0d1a;
  --text-secondary: #4a4a6a;
  --text-muted:     #8a8aa8;
  --text-disabled:  #c8c8d8;

  --border-default: #e0e0ec;
  --border-subtle:  #ebebf5;
  --border-focus:   #6366f1;
  --border-hover:   #c8c8d8;

  --accent-indigo:  #6366f1;
  --accent-purple:  #8b5cf6;
  --accent-cyan:    #06b6d4;
  --accent-green:   #10b981;
  --accent-yellow:  #f59e0b;
  --accent-red:     #ef4444;

  color-scheme: light;
}

/* ── CYBERPUNK ────────────────────────────────────────────── */
html.cyberpunk {
  --bg-base:        #05050a;
  --bg-surface:     #080810;
  --bg-card:        #0c0c18;
  --bg-card-hover:  #10101e;
  --bg-input:       #0e0e1c;
  --bg-elevated:    #121222;

  --text-primary:   #f0f0ff;
  --text-secondary: #a0a0d0;
  --text-muted:     #5050a0;
  --text-disabled:  #2a2a50;

  --border-default: rgba(255,0,110,.2);
  --border-subtle:  rgba(255,0,110,.08);
  --border-focus:   #ff006e;
  --border-hover:   rgba(255,0,110,.4);

  --accent-indigo:  #ff006e;
  --accent-purple:  #bf00ff;
  --accent-cyan:    #00f5ff;
  --accent-green:   #00ff88;
  --accent-yellow:  #ffee00;
  --accent-red:     #ff2244;

  color-scheme: dark;
}

/* ── AURORA ───────────────────────────────────────────────── */
html.aurora {
  --bg-base:        #020a12;
  --bg-surface:     #040e18;
  --bg-card:        #071220;
  --bg-card-hover:  #0a1828;
  --bg-input:       #081520;
  --bg-elevated:    #0c1a2a;

  --text-primary:   #e8f8ff;
  --text-secondary: #80c8e8;
  --text-muted:     #3a6888;
  --text-disabled:  #1a3848;

  --border-default: rgba(0,212,255,.15);
  --border-subtle:  rgba(0,212,255,.06);
  --border-focus:   #00d4ff;
  --border-hover:   rgba(0,212,255,.3);

  --accent-indigo:  #00d4ff;
  --accent-purple:  #7c3aed;
  --accent-cyan:    #00f5ff;
  --accent-green:   #00ffcc;
  --accent-yellow:  #f0e060;
  --accent-red:     #ff4466;

  color-scheme: dark;
}

/* ── BLOOD RED ────────────────────────────────────────────── */
html.bloodred {
  --bg-base:        #080204;
  --bg-surface:     #0f0306;
  --bg-card:        #140408;
  --bg-card-hover:  #1a050a;
  --bg-input:       #12040a;
  --bg-elevated:    #1a0610;

  --text-primary:   #fff0f0;
  --text-secondary: #d08888;
  --text-muted:     #804040;
  --text-disabled:  #401818;

  --border-default: rgba(220,38,38,.2);
  --border-subtle:  rgba(220,38,38,.08);
  --border-focus:   #dc2626;
  --border-hover:   rgba(220,38,38,.4);

  --accent-indigo:  #dc2626;
  --accent-purple:  #991b1b;
  --accent-cyan:    #f87171;
  --accent-green:   #ff6b6b;
  --accent-yellow:  #fca5a5;
  --accent-red:     #ff0000;

  color-scheme: dark;
}

/* ── ARCTIC ───────────────────────────────────────────────── */
html.arctic {
  --bg-base:        #f8fbff;
  --bg-surface:     #f0f6ff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f4f8ff;
  --bg-input:       #eef4ff;
  --bg-elevated:    #ffffff;

  --text-primary:   #0a1628;
  --text-secondary: #2a4a6a;
  --text-muted:     #6a8aaa;
  --text-disabled:  #b0c8e0;

  --border-default: #c8ddf0;
  --border-subtle:  #e0edf8;
  --border-focus:   #0ea5e9;
  --border-hover:   #a8c8e8;

  --accent-indigo:  #0ea5e9;
  --accent-purple:  #38bdf8;
  --accent-cyan:    #06b6d4;
  --accent-green:   #10b981;
  --accent-yellow:  #f59e0b;
  --accent-red:     #ef4444;

  color-scheme: light;
}

/* ── GLOBAL BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-main);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}