:root {
  --accent: #3b0764;
  --accent-2: #5b21b6;
  --accent-3: #7c3aed;
  --accent-4: #a78bfa;
  --accent-soft: rgba(91, 33, 182, 0.22);

  --bg-1: #0a0a12;
  --bg-2: #12121c;
  --bg-3: #181826;
  --card-bg: #16161f;
  --card-border: rgba(255, 255, 255, 0.08);
  --text-main: #ffffff;
  --text-soft: #b8b8c8;
  --text-dim: #85859a;

  --radius: 16px;
  --radius-sm: 10px;
  --font-main: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6);
}

body[data-color="violet"]  { --accent: #3b0764; --accent-2: #5b21b6; --accent-3: #7c3aed; --accent-4: #a78bfa; --accent-soft: rgba(91,33,182,.28); }
body[data-color="emerald"] { --accent: #064e3b; --accent-2: #059669; --accent-3: #10b981; --accent-4: #6ee7b7; --accent-soft: rgba(6,78,59,.28); }
body[data-color="cyan"]    { --accent: #155e75; --accent-2: #0891b2; --accent-3: #06b6d4; --accent-4: #67e8f9; --accent-soft: rgba(21,94,117,.28); }
body[data-color="pink"]    { --accent: #831843; --accent-2: #db2777; --accent-3: #ec4899; --accent-4: #f9a8d4; --accent-soft: rgba(131,24,67,.28); }
body[data-color="amber"]   { --accent: #78350f; --accent-2: #d97706; --accent-3: #f59e0b; --accent-4: #fcd34d; --accent-soft: rgba(120,53,15,.28); }
body[data-color="red"]     { --accent: #7f1d1d; --accent-2: #dc2626; --accent-3: #ef4444; --accent-4: #fca5a5; --accent-soft: rgba(127,29,29,.28); }
body[data-color="blue"]    { --accent: #1e3a8a; --accent-2: #2563eb; --accent-3: #3b82f6; --accent-4: #93c5fd; --accent-soft: rgba(30,58,138,.28); }
body[data-color="lime"]    { --accent: #3f6212; --accent-2: #65a30d; --accent-3: #84cc16; --accent-4: #d9f99d; --accent-soft: rgba(63,98,18,.28); }

body[data-theme="pixel"] {
  --radius: 0;
  --radius-sm: 0;
  --font-main: 'Press Start 2P', monospace;
  --font-mono: 'Press Start 2P', monospace;
  --bg-1: #0d0b1f;
  --bg-2: #12102a;
  --bg-3: #1a1838;
  --card-bg: #171533;
  --card-border: var(--accent-3);
  --text-main: #ffffff;
  --text-soft: #c4c0f0;
  --text-dim: #8a86b8;
  --shadow-sm: 4px 4px 0 rgba(0,0,0,0.8);
  --shadow-md: 6px 6px 0 rgba(0,0,0,0.85);
  --shadow-lg: 8px 8px 0 rgba(0,0,0,0.9);
}