/* ================================================================
   SkillUpNow — Royal Amethyst Design System
   Deep indigo-violet palette — elegant, professional, theme-adaptive
   Base hue: #441998 (Royal Deep Indigo)
   ================================================================ */

/* ── LIGHT THEME — Royal Amethyst ─────────────────────────────── */
:root[data-theme="light"] {
  --bg:           #fefcff;
  --bg2:          #f3f0fe;
  --bg-secondary: #ebe6fd;

  --txt:  #160840;
  --txt2: #2e1472;
  --txt3: #5a379a;
  --txt4: #8c6ec0;

  --panel:  #ede8fd;
  --panel2: #ddd5fb;
  --glass:  rgba(255,255,255,0.97);
  --border:  rgba(68,25,152,0.13);
  --border2: rgba(68,25,152,0.27);

  /* Primary scale — Royal Deep Indigo */
  --v1: #441998;
  --v2: #5c22c5;
  --v3: #7c3aed;
  --v4: #b09de8;
  --v5: rgba(68,25,152,0.09);

  --b1: #2e0f6e;
  --b2: #441998;
  --b3: #5c22c5;

  --grad:       linear-gradient(135deg, #441998 0%, #2e0f6e 100%);
  --grad2:      linear-gradient(135deg, #5c22c5 0%, #441998 100%);
  --grad-shine: linear-gradient(105deg, #441998, #5c22c5, #7c3aed, #441998);

  --grad-hero:
    radial-gradient(ellipse 72% 62% at 0% 28%,   rgba(68,25,152,0.11)  0%, transparent 65%),
    radial-gradient(ellipse 56% 52% at 100% 72%,  rgba(92,34,197,0.09)  0%, transparent 60%),
    radial-gradient(ellipse 42% 42% at 52% 100%,  rgba(68,25,152,0.06)  0%, transparent 55%);

  --shadow-card: 0 4px 22px rgba(68,25,152,0.09), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-glow: 0 0 30px rgba(68,25,152,0.17);
  --shadow-btn:  0 4px 18px rgba(68,25,152,0.32);

  --r1: 14px;
  --r2: 20px;
  --r3: 28px;
  --r4: 40px;
}

/* ── DARK THEME — Deep Cosmos ──────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:           #07040f;
  --bg2:          #0e0b1e;
  --bg-secondary: #14102a;

  --txt:  #f0eeff;
  --txt2: #c4b5fd;
  --txt3: #8a6ec8;
  --txt4: #564080;

  --panel:  rgba(255,255,255,0.04);
  --panel2: rgba(255,255,255,0.08);
  --glass:  rgba(255,255,255,0.04);
  --border:  rgba(157,114,251,0.16);
  --border2: rgba(157,114,251,0.30);

  /* Primary scale — vivid violet for dark bg */
  --v1: #9d72fb;
  --v2: #b89dfd;
  --v3: #d0c1fe;
  --v4: #e8e0ff;
  --v5: rgba(157,114,251,0.14);

  --b1: #7c3aed;
  --b2: #8b5cf6;
  --b3: #9d72fb;

  --grad:       linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --grad2:      linear-gradient(135deg, #9d72fb 0%, #8b5cf6 100%);
  --grad-shine: linear-gradient(105deg, #8b5cf6, #9d72fb, #c4b5fd, #8b5cf6);

  --grad-hero:
    radial-gradient(ellipse 70% 60% at 0% 30%,   rgba(68,25,152,0.28)  0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100% 70%,  rgba(157,114,251,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 100%,  rgba(92,34,197,0.14)  0%, transparent 55%);

  --shadow-card: 0 20px 60px rgba(0,0,0,0.50), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-glow: 0 0 48px rgba(157,114,251,0.36);
  --shadow-btn:  0 8px 32px rgba(157,114,251,0.48);

  --r1: 14px;
  --r2: 20px;
  --r3: 28px;
  --r4: 40px;
}

/* ── OCEAN VARIANT ─────────────────────────────────────────────── */
:root[data-theme="dark"][data-theme-variant="ocean"] {
  --bg:           #060d16;
  --bg2:          #0a1422;
  --bg-secondary: #0e1d30;

  --txt:  #eaf6ff;
  --txt2: #9ecce6;
  --txt3: #548aaa;
  --txt4: #326480;

  --panel:  rgba(6,30,56,0.72);
  --panel2: rgba(10,44,78,0.82);
  --glass:  rgba(8,28,52,0.65);
  --border:  rgba(30,160,220,0.18);
  --border2: rgba(30,180,240,0.34);

  --v1: #22b8e8;
  --v2: #4dc8f5;
  --v3: #80d9ff;
  --v4: #b8eeff;
  --v5: rgba(34,184,232,0.14);

  --b1: #0d8fc4;
  --b2: #0ea5e9;
  --b3: #38bdf8;

  --grad:       linear-gradient(135deg, #0ea5e9 0%, #0d8fc4 100%);
  --grad2:      linear-gradient(135deg, #22b8e8 0%, #0ea5e9 100%);
  --grad-shine: linear-gradient(105deg, #22b8e8, #4dc8f5, #80d9ff, #22b8e8);

  --grad-hero:
    radial-gradient(ellipse 70% 60% at 0% 30%,   rgba(14,165,233,0.22)  0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100% 70%,  rgba(34,184,232,0.18)  0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 100%,  rgba(14,165,233,0.12)  0%, transparent 55%);

  --shadow-card: 0 20px 56px rgba(0,0,0,0.42), 0 1px 0 rgba(34,184,232,0.07) inset;
  --shadow-glow: 0 0 40px rgba(14,165,233,0.32);
  --shadow-btn:  0 8px 28px rgba(14,165,233,0.46);
}

/* ── SUNSET VARIANT ────────────────────────────────────────────── */
:root[data-theme="dark"][data-theme-variant="sunset"] {
  --bg:           #120810;
  --bg2:          #1c0d18;
  --bg-secondary: #261222;

  --txt:  #fff0f6;
  --txt2: #f0b0cc;
  --txt3: #b06888;
  --txt4: #7a4460;

  --panel:  rgba(48,12,30,0.72);
  --panel2: rgba(64,16,38,0.82);
  --glass:  rgba(54,14,32,0.65);
  --border:  rgba(236,72,153,0.18);
  --border2: rgba(244,114,182,0.34);

  --v1: #f06090;
  --v2: #f472b6;
  --v3: #f9a8d4;
  --v4: #fce7f3;
  --v5: rgba(240,96,144,0.14);

  --b1: #db2777;
  --b2: #ec4899;
  --b3: #f472b6;

  --grad:       linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  --grad2:      linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
  --grad-shine: linear-gradient(105deg, #f472b6, #f9a8d4, #ec4899, #f472b6);

  --grad-hero:
    radial-gradient(ellipse 70% 60% at 0% 30%,   rgba(236,72,153,0.22)  0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100% 70%,  rgba(244,114,182,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 100%,  rgba(236,72,153,0.12)  0%, transparent 55%);

  --shadow-card: 0 20px 56px rgba(0,0,0,0.42), 0 1px 0 rgba(244,114,182,0.07) inset;
  --shadow-glow: 0 0 40px rgba(236,72,153,0.32);
  --shadow-btn:  0 8px 28px rgba(236,72,153,0.46);
}

/* ── EMERALD VARIANT ───────────────────────────────────────────── */
:root[data-theme="dark"][data-theme-variant="emerald"] {
  --bg:           #060f08;
  --bg2:          #0a1a0d;
  --bg-secondary: #0e2414;

  --txt:  #f0fdf4;
  --txt2: #96d8b0;
  --txt3: #4a9e6a;
  --txt4: #2e6644;

  --panel:  rgba(8,28,14,0.75);
  --panel2: rgba(12,40,20,0.84);
  --glass:  rgba(10,34,16,0.68);
  --border:  rgba(34,197,94,0.18);
  --border2: rgba(74,222,128,0.32);

  --v1: #22c55e;
  --v2: #4ade80;
  --v3: #86efac;
  --v4: #bbf7d0;
  --v5: rgba(34,197,94,0.13);

  --b1: #16a34a;
  --b2: #22c55e;
  --b3: #4ade80;

  --grad:       linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --grad2:      linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  --grad-shine: linear-gradient(105deg, #4ade80, #86efac, #22c55e, #4ade80);

  --grad-hero:
    radial-gradient(ellipse 70% 60% at 0% 30%,   rgba(34,197,94,0.22)  0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100% 70%,  rgba(74,222,128,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 100%,  rgba(34,197,94,0.12)  0%, transparent 55%);

  --shadow-card: 0 20px 56px rgba(0,0,0,0.42), 0 1px 0 rgba(74,222,128,0.07) inset;
  --shadow-glow: 0 0 40px rgba(34,197,94,0.3);
  --shadow-btn:  0 8px 28px rgba(34,197,94,0.44);
}

/* ── GLOBAL (fallback = light Royal Amethyst) ──────────────────── */
:root {
  --bg:           #fefcff;
  --bg2:          #f3f0fe;
  --bg-secondary: #ebe6fd;

  --txt:  #160840;
  --txt2: #2e1472;
  --txt3: #5a379a;
  --txt4: #8c6ec0;

  --panel:  #ede8fd;
  --panel2: #ddd5fb;
  --glass:  rgba(255,255,255,0.97);
  --border:  rgba(68,25,152,0.13);
  --border2: rgba(68,25,152,0.27);

  --v1: #441998;
  --v2: #5c22c5;
  --v3: #7c3aed;
  --v4: #b09de8;
  --v5: rgba(68,25,152,0.09);

  --b1: #2e0f6e;
  --b2: #441998;
  --b3: #5c22c5;

  --grad:       linear-gradient(135deg, #441998 0%, #2e0f6e 100%);
  --grad2:      linear-gradient(135deg, #5c22c5 0%, #441998 100%);
  --grad-shine: linear-gradient(105deg, #441998, #5c22c5, #7c3aed, #441998);

  --grad-hero:
    radial-gradient(ellipse 72% 62% at 0% 28%,   rgba(68,25,152,0.11)  0%, transparent 65%),
    radial-gradient(ellipse 56% 52% at 100% 72%,  rgba(92,34,197,0.09)  0%, transparent 60%),
    radial-gradient(ellipse 42% 42% at 52% 100%,  rgba(68,25,152,0.06)  0%, transparent 55%);

  --shadow-card: 0 4px 22px rgba(68,25,152,0.09), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-glow: 0 0 30px rgba(68,25,152,0.17);
  --shadow-btn:  0 4px 18px rgba(68,25,152,0.32);

  --r1: 14px;
  --r2: 20px;
  --r3: 28px;
  --r4: 40px;

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}