/* ═══════════════════════════════════════════════════════════
   EVA Academy — Design Tokens
   "Aetheric Intelligence" — Luminous Metallic Glassmorphism
   All colors derived from the Aetheric Blue (#2dd4bf) family
   ═══════════════════════════════════════════════════════════ */

/* ── Default (Dark / Midnight) Theme ── */
:root {
  /* ── Brand Colors ── */
  --primary:            #2dd4bf;
  --primary-light:      #5eead4;
  --primary-dark:       #14b8a6;
  --primary-gradient:   linear-gradient(135deg, #0f766e, #2dd4bf);
  --primary-gradient-rev: linear-gradient(135deg, #2dd4bf, #5eead4);

  /* ── Accent Colors ── */
  --accent:             #7c6fee;   /* violet — completed, achievements */
  --accent-light:       #a79cf7;
  --accent-dark:        #5548c8;
  --accent2:            #22d3ee;   /* cyan — current/active states */
  --accent2-light:      #67e8f9;
  --accent2-dark:       #0891b2;
  --accent3:            #fb7bb0;   /* pink — boss nodes, special rewards */
  --accent3-light:      #fda4c4;
  --accent3-dark:       #cc3d6e;
  --mint:               #2dd4bf;   /* aetheric mint — XP, success highlights */

  /* ── Semantic Colors ── */
  --green:              #34d399;
  --green-dark:         #059669;
  --red:                #fb7185;
  --red-dark:           #e11d48;
  --red-light:          #fda4af;
  --light-red:          #2a1420;
  --light-pink:         #4a1f30;
  --orange:             #fb923c;
  --gold:               #fbbf24;
  --blue:               #38bdf8;
  --blue-dark:          #0284c7;
  --purple:             #7c6fee;
  --cyan:               #22d3ee;
  --pink:               #fb7bb0;
  --yellow:             #fbbf24;
  --teal:               #2dd4bf;
  --amber-dark:         #f59e0b;
  --amber-darker:       #d97706;

  /* ── Dark Theme Surfaces (metallic glass) ── */
  --surface:            rgba(19, 27, 46, 0.55);
  --surface-alt:         rgba(19, 27, 46, 0.4);
  --surface-raised:      rgba(24, 34, 58, 0.72);
  --surface-hover:        rgba(45, 212, 191, 0.08);

  /* ── Dark Theme Text ── */
  --text-primary:       #f1f5f9;
  --text-secondary:     #cbd5e1;
  --text-tertiary:      #94a3b8;
  --text-muted:         #64748b;
  --text-inverse:       #071019;

  /* ── Dark Theme Backgrounds ── */
  --bg-page:            #0b1326;
  --bg-section:         #0e1830;
  --bg-alt:             #131b2e;
  --bg-hero:            #0b1326;

  /* ── Dark Theme Borders — ultra-thin metallic edges ── */
  --border:             rgba(148, 163, 184, 0.16);
  --border-light:       rgba(148, 163, 184, 0.10);
  --border-subtle:      rgba(148, 163, 184, 0.06);
  --border-glow:        rgba(45, 212, 191, 0.4);

  /* ── Dark Theme Shadows / Glows ── */
  --shadow:             0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover:       0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(45, 212, 191, 0.18);
  --shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(45, 212, 191, 0.1);
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.35);
  --glow:               0 0 15px rgba(45, 212, 191, 0.2);
  --glow-strong:        0 0 30px rgba(45, 212, 191, 0.3);

  /* ── Legacy Aliases ── */
  --text-dark:          var(--text-primary);
  --text-mid:           var(--text-secondary);
  --text-light:         var(--text-tertiary);
  --text-heading:       var(--text-primary);
  --text-body:          var(--text-secondary);
  --bg-white:           var(--surface);
  --bg-gray:            var(--bg-section);
  --bg-light-purple:    var(--bg-alt);
  --hero-bg:            var(--bg-hero);

  /* ── Code Editor Surfaces ── */
  --code-bg:            #070d1a;
  --code-bg-darker:     #04070f;
  --code-topbar:        #0e1830;
  --code-output-bar:    #131b2e;
  --code-text:          #e2e8f0;
  --code-text-cmd:      #2dd4bf;

  /* ── Code Editor Dots ── */
  --dot-red:            #fb7185;
  --dot-yellow:         #fbbf24;
  --dot-green:          #34d399;

  /* ── Border Radius ── */
  --radius-sm:          10px;
  --radius:             18px;
  --radius-lg:          24px;
  --radius-full:        99px;

  /* ── Transition ── */
  --transition:         all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Typography ── */
  --font-base:          'Montserrat', sans-serif;
  --font-heading:       'Montserrat', sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;
  --font-weight-body:    300;
  --font-weight-heading: 700;

  /* ── Layout ── */
  --nav-h:              64px;

  /* ── Glassmorphism ── */
  --glass-blur:         20px;
  --glass-border:       1px solid rgba(203, 213, 225, 0.14);
  --glass-border-top:   rgba(255, 255, 255, 0.16);
  --glass-shine:        linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 45%);

  /* ── Extended Palette ── */
  --purple-light:       #a79cf7;
  --purple-dark:        #5548c8;
  --intense-rose:       #fb7bb0;
  --green-accent:       #2dd4bf;
  --green-light:        rgba(45, 212, 191, 0.12);
  --green-mid:          rgba(45, 212, 191, 0.2);
  --green-dark-text:    #2dd4bf;
  --gold-light:         rgba(251, 191, 36, 0.1);
  --gold-border:        rgba(251, 191, 36, 0.2);
  --gold-dark:          #fbbf24;
  --gold-darkest:       #fde68a;
  --cream-bg:           #0b1326;
  --warm-bg:            #0e1830;
  --dark-surface:       #070d1a;
  --dark-surface-alt:   #0e1830;
  --light-purple:       rgba(124, 111, 238, 0.12);
  --light-purple-alt:   rgba(124, 111, 238, 0.18);
  --light-purple-text:  #a79cf7;
  --purple-lightest:    rgba(124, 111, 238, 0.06);
  --orange-dark:        #d97706;
  --indigo:             #7c6fee;
  --slate-text:         #94a3b8;
  --auth-gradient-start: #0b1326;
  --hero-gradient-mid:  #131b2e;
  --creamy-text:        #f8fafc;

  /* Landing Page Feature Cards — metallic gradient family */
  --fc-1: linear-gradient(135deg, #0f172a, #1e3a5f);
  --fc-2: linear-gradient(135deg, #0f3d38, #0d9488);
  --fc-3: linear-gradient(135deg, #2c2a63, #6366f1);
  --fc-4: linear-gradient(135deg, #134e4a, #2dd4bf);

  --shimmer-color: rgba(255,255,255,0.35);
  --logo-bg: linear-gradient(135deg, #14b8a6, #2dd4bf, #5eead4);

  /* CTA / footer band gradients — muted in dark mode so they don't
     glare against the near-black page background */
  --cta-gradient: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #b0587f 100%);
  --footer-gradient: linear-gradient(330deg, #0c3f3a, #0f766e, #14b8a6);
}

/* ── Light Theme (system preference) ── */
@media (prefers-color-scheme: dark) {
  :root {
    /* dark is already the default root; nothing to override */
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --surface:            rgba(255, 255, 255, 0.7);
    --surface-alt:        rgba(255, 255, 255, 0.5);
    --surface-raised:     rgba(255, 255, 255, 0.85);
    --surface-hover:      rgba(45, 212, 191, 0.06);

    --text-primary:       #0f172a;
    --text-secondary:     #334155;
    --text-tertiary:      #64748b;
    --text-muted:         #94a3b8;
    --text-inverse:       #ffffff;

    --bg-page:            #f8fafc;
    --bg-section:         #eef2f7;
    --bg-alt:             #f1f5f9;
    --bg-hero:            #f8fafc;

    --border:             rgba(15, 23, 42, 0.08);
    --border-light:       rgba(15, 23, 42, 0.05);
    --border-subtle:      rgba(15, 23, 42, 0.03);
    --border-glow:        rgba(13, 148, 136, 0.35);

    --shadow:             0 8px 32px rgba(0, 0, 0, 0.05);
    --shadow-hover:       0 16px 48px rgba(0, 0, 0, 0.08);
    --shadow-lg:          0 12px 40px rgba(0, 0, 0, 0.06);
    --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.04);
    --glow:               0 8px 32px rgba(0, 0, 0, 0.05);
    --glow-strong:        0 8px 32px rgba(0, 0, 0, 0.08);

    --glass-border:       1px solid rgba(15, 23, 42, 0.08);
    --glass-border-top:   rgba(255, 255, 255, 0.6);
    --glass-shine:        linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%);

    --text-dark:          var(--text-primary);
    --text-mid:           var(--text-secondary);
    --text-light:         var(--text-tertiary);
    --text-heading:       var(--text-primary);
    --text-body:          var(--text-secondary);
    --bg-white:           var(--surface);
    --bg-gray:            var(--bg-section);
    --bg-light-purple:    var(--bg-alt);
    --hero-bg:            var(--bg-hero);
    --auth-gradient-start: #f8fafc;
    --hero-gradient-mid:  #eef2f7;

    --primary:            #0d9488;
    --primary-light:      #2dd4bf;
    --primary-dark:       #0f766e;

    --gold-light:         rgba(217, 119, 6, 0.1);
    --gold-border:        rgba(217, 119, 6, 0.25);
    --gold-dark:          #d97706;
    --gold-darkest:       #92400e;
    --cream-bg:           #f8fafc;
    --warm-bg:            #eef2f7;
    --light-purple:       rgba(85, 72, 200, 0.08);
    --light-purple-alt:   rgba(85, 72, 200, 0.12);
    --light-purple-text:  #5548c8;
    --purple-lightest:    rgba(85, 72, 200, 0.04);
    --slate-text:         #334155;

    --fc-1: linear-gradient(135deg, #1e293b, #334155);
    --fc-2: linear-gradient(135deg, #0f766e, #0d9488);
    --fc-3: linear-gradient(135deg, #4338ca, #6366f1);
    --fc-4: linear-gradient(135deg, #0e7490, #2dd4bf);

    --shimmer-color: rgba(255,255,255,0.55);
    --logo-bg: linear-gradient(135deg, #0f766e, #0d9488, #2dd4bf);

    --cta-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--pink) 100%);
    --footer-gradient: linear-gradient(330deg, var(--primary-dark), var(--primary), var(--primary-light));
  }
}

/* ── Dark Theme (manual toggle) ── */
[data-theme="dark"] {
  --surface:            rgba(19, 27, 46, 0.55);
  --surface-alt:        rgba(19, 27, 46, 0.4);
  --surface-raised:     rgba(24, 34, 58, 0.72);
  --surface-hover:      rgba(45, 212, 191, 0.08);

  --text-primary:       #f1f5f9;
  --text-secondary:     #cbd5e1;
  --text-tertiary:      #94a3b8;
  --text-muted:         #64748b;
  --text-inverse:       #071019;

  --bg-page:            #0b1326;
  --bg-section:         #0e1830;
  --bg-alt:             #131b2e;
  --bg-hero:            #0b1326;

  --border:             rgba(148, 163, 184, 0.16);
  --border-light:       rgba(148, 163, 184, 0.10);
  --border-subtle:      rgba(148, 163, 184, 0.06);
  --border-glow:        rgba(45, 212, 191, 0.4);

  --shadow:             0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover:       0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(45, 212, 191, 0.18);
  --shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(45, 212, 191, 0.1);
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.35);
  --glow:               0 0 15px rgba(45, 212, 191, 0.2);
  --glow-strong:        0 0 30px rgba(45, 212, 191, 0.3);

  --glass-border:       1px solid rgba(203, 213, 225, 0.14);
  --glass-border-top:   rgba(255, 255, 255, 0.16);
  --glass-shine:        linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 45%);

  --primary:            #2dd4bf;
  --primary-light:      #5eead4;
  --primary-dark:       #14b8a6;

  --text-dark:          var(--text-primary);
  --text-mid:           var(--text-secondary);
  --text-light:         var(--text-tertiary);
  --text-heading:       var(--text-primary);
  --text-body:          var(--text-secondary);
  --bg-white:           var(--surface);
  --bg-gray:            var(--bg-section);
  --bg-light-purple:    var(--bg-alt);
  --hero-bg:            var(--bg-hero);
  --auth-gradient-start: #0b1326;
  --hero-gradient-mid:  #131b2e;

  --green-light:        rgba(45, 212, 191, 0.12);
  --green-mid:          rgba(45, 212, 191, 0.2);
  --green-dark-text:    #2dd4bf;
  --gold-light:         rgba(251, 191, 36, 0.1);
  --gold-border:        rgba(251, 191, 36, 0.2);
  --gold-dark:          #fbbf24;
  --gold-darkest:       #fde68a;
  --cream-bg:           #0b1326;
  --warm-bg:            #0e1830;
  --light-purple:       rgba(124, 111, 238, 0.12);
  --light-purple-alt:   rgba(124, 111, 238, 0.18);
  --light-purple-text:  #a79cf7;
  --purple-lightest:    rgba(124, 111, 238, 0.06);
  --slate-text:         #94a3b8;

  --fc-1: linear-gradient(135deg, #0f172a, #1e3a5f);
  --fc-2: linear-gradient(135deg, #0f3d38, #0d9488);
  --fc-3: linear-gradient(135deg, #2c2a63, #6366f1);
  --fc-4: linear-gradient(135deg, #134e4a, #2dd4bf);

  --shimmer-color: rgba(255,255,255,0.35);
  --logo-bg: linear-gradient(135deg, #14b8a6, #2dd4bf, #5eead4);

  --cta-gradient: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #b0587f 100%);
  --footer-gradient: linear-gradient(330deg, #0c3f3a, #0f766e, #14b8a6);
}

/* ── Light Theme (manual toggle override) ── */
[data-theme="light"] {
  --surface:            rgba(255, 255, 255, 0.7);
  --surface-alt:        rgba(255, 255, 255, 0.5);
  --surface-raised:     rgba(255, 255, 255, 0.85);
  --surface-hover:      rgba(45, 212, 191, 0.06);

  --text-primary:       #0f172a;
  --text-secondary:     #334155;
  --text-tertiary:      #64748b;
  --text-muted:         #94a3b8;
  --text-inverse:       #ffffff;

  --bg-page:            #f8fafc;
  --bg-section:         #eef2f7;
  --bg-alt:             #f1f5f9;
  --bg-hero:            #f8fafc;

  --border:             rgba(15, 23, 42, 0.08);
  --border-light:       rgba(15, 23, 42, 0.05);
  --border-subtle:      rgba(15, 23, 42, 0.03);
  --border-glow:        rgba(13, 148, 136, 0.35);

  --shadow:             0 8px 32px rgba(0, 0, 0, 0.05);
  --shadow-hover:       0 16px 48px rgba(0, 0, 0, 0.08);
  --shadow-lg:          0 12px 40px rgba(0, 0, 0, 0.06);
  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.04);
  --glow:               0 8px 32px rgba(0, 0, 0, 0.05);
  --glow-strong:        0 8px 32px rgba(0, 0, 0, 0.08);

  --glass-border:       1px solid rgba(15, 23, 42, 0.08);
  --glass-border-top:   rgba(255, 255, 255, 0.6);
  --glass-shine:        linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%);

  --primary:            #0d9488;
  --primary-light:      #2dd4bf;
  --primary-dark:       #0f766e;

  --text-dark:          var(--text-primary);
  --text-mid:           var(--text-secondary);
  --text-light:         var(--text-tertiary);
  --text-heading:       var(--text-primary);
  --text-body:          var(--text-secondary);
  --bg-white:           var(--surface);
  --bg-gray:            var(--bg-section);
  --bg-light-purple:    var(--bg-alt);
  --hero-bg:            var(--bg-hero);
  --auth-gradient-start: #f8fafc;
  --hero-gradient-mid:  #eef2f7;

  --purple-light:       #a79cf7;
  --purple-dark:        #5548c8;
  --intense-rose:       #fb7bb0;
  --green-accent:       #0d9488;
  --green-light:        rgba(13, 148, 136, 0.1);
  --green-mid:          rgba(13, 148, 136, 0.18);
  --green-dark-text:    #0f766e;
  --gold-light:         rgba(217, 119, 6, 0.1);
  --gold-border:        rgba(217, 119, 6, 0.25);
  --gold-dark:          #d97706;
  --gold-darkest:       #92400e;
  --cream-bg:           #f8fafc;
  --warm-bg:            #eef2f7;
  --light-purple:       rgba(85, 72, 200, 0.08);
  --light-purple-alt:   rgba(85, 72, 200, 0.12);
  --light-purple-text:  #5548c8;
  --purple-lightest:    rgba(85, 72, 200, 0.04);
  --orange-dark:        #d97706;
  --indigo:             #5548c8;
  --slate-text:         #334155;

  --fc-1: linear-gradient(135deg, #1e293b, #334155);
  --fc-2: linear-gradient(135deg, #0f766e, #0d9488);
  --fc-3: linear-gradient(135deg, #4338ca, #6366f1);
  --fc-4: linear-gradient(135deg, #0e7490, #2dd4bf);

  --shimmer-color: rgba(255,255,255,0.55);
  --logo-bg: linear-gradient(135deg, #0f766e, #0d9488, #2dd4bf);

  --cta-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--pink) 100%);
  --footer-gradient: linear-gradient(330deg, var(--primary-dark), var(--primary), var(--primary-light));
}