/* ── Palette Games · theme.css ───────────────────────────────── */

/* ── Default accent colours (Arcade preset) ─────────────────── */
:root {
  --c1: #3b82f6;   /* Electric Blue  */
  --c2: #ec4899;   /* Hot Pink        */
  --c3: #22c55e;   /* Lime Green      */
  --c4: #f59e0b;   /* Warm Amber      */

  /* ── Derived gradients ───────────────────────────────────── */
  --grad:   linear-gradient(135deg, var(--c1), var(--c2), var(--c3), var(--c4));
  --grad-h: linear-gradient(90deg,  var(--c1), var(--c2), var(--c3), var(--c4));
  --grad-animated: linear-gradient(270deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));

  /* ── Dark theme (default) ────────────────────────────────── */
  --bg:              #09090c;
  --bg2:             #111118;
  --bg3:             #1a1a24;
  --surface:         rgba(255, 255, 255, 0.045);
  --surface2:        rgba(255, 255, 255, 0.08);
  --surface-hover:   rgba(255, 255, 255, 0.11);
  --surface-active:  rgba(255, 255, 255, 0.15);
  --border:          rgba(255, 255, 255, 0.07);
  --border-strong:   rgba(255, 255, 255, 0.14);
  --text:            #f0f0f8;
  --text-muted:      rgba(240, 240, 248, 0.55);
  --text-faint:      rgba(240, 240, 248, 0.28);
  --nav-bg:          rgba(9, 9, 12, 0.82);
  --shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:       0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg:       0 20px 64px rgba(0, 0, 0, 0.6);
  --scrollbar-track: rgba(255, 255, 255, 0.05);
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
}

/* ── Light theme ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:              #f4f3f8;
  --bg2:             #eceaf5;
  --bg3:             #e4e2f0;
  --surface:         rgba(0, 0, 0, 0.04);
  --surface2:        rgba(0, 0, 0, 0.07);
  --surface-hover:   rgba(0, 0, 0, 0.10);
  --surface-active:  rgba(0, 0, 0, 0.14);
  --border:          rgba(0, 0, 0, 0.07);
  --border-strong:   rgba(0, 0, 0, 0.14);
  --text:            #0d0d14;
  --text-muted:      rgba(13, 13, 20, 0.58);
  --text-faint:      rgba(13, 13, 20, 0.32);
  --nav-bg:          rgba(244, 243, 248, 0.82);
  --shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-md:       0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-lg:       0 20px 64px rgba(0, 0, 0, 0.18);
  --scrollbar-track: rgba(0, 0, 0, 0.06);
  --scrollbar-thumb: rgba(0, 0, 0, 0.20);
}

/* ── Global transition for colour changes ────────────────────── */
body,
.nav,
.palette-panel,
.project-card,
.tag,
.mode-btn,
.nav-link,
.site-footer {
  transition:
    background-color 0.35s ease,
    color            0.35s ease,
    border-color     0.35s ease,
    box-shadow       0.35s ease;
}

/* Accent transitions — smooth palette swaps on hover/navigation */
.gradient-text,
.hero-cta,
.card-link,
.scroll-line,
.orb,
.card-glow,
.project-hero-orb,
.hero-bg,
.chip,
.status-badge,
.link-btn,
.nav-palette-btn,
.preset-dot,
[class*="dot-"] {
  transition:
    filter          0.4s ease,
    opacity         0.4s ease,
    background      0.4s ease,
    background-color 0.4s ease,
    box-shadow      0.4s ease,
    border-color    0.4s ease;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar               { width: 6px; }
::-webkit-scrollbar-track         { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb         { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { background: var(--c1); }