/* ═══════════════════════════════
   THEME.CSS — Variables & Tokens
═══════════════════════════════ */
@layer properties {
  @property --bg-position {
    syntax: "<number>";
    inherits: true;
    initial-value: 100;
  }
}

:root {
  --p1: #6366f1;
  --p2: #8b5cf6;
  --p3: #06b6d4;
  --p4: #10b981;
  --grad: linear-gradient(135deg, var(--p1), var(--p2), var(--p3));
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Figtree', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Animated BG Colors */
  --color-white: hsl(0, 0%, 100%);
  --color-cyan: hsl(180, 100%, 50%);
  --color-blue: hsl(240, 100%, 50%);
  --color-purple: hsl(270, 100%, 50%);
  --color-pink: hsl(330, 40%, 70%);
  --color-red: hsl(0, 100%, 50%);
  --color-yellow: hsl(60, 100%, 50%);
  --color-lime: hsl(90, 100%, 75%);
  --bg-position: 100;
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --bg: #0f172a;
  --bg2: #1e293b;
  --glass: rgba(255,255,255,0.03);
  --glass2: rgba(255,255,255,0.06);
  --gb: rgba(255,255,255,0.05);
  --gb2: rgba(255,255,255,0.08);
  --text: #f1f5f9;
  --text-main: #f8fafc;
  --text-sub: rgba(248,250,252,0.6);
  --text-mid: rgba(248,250,252,0.8);
  --nav-bg: rgba(15,23,42,0.8);
  --footer-bg: rgba(15,23,42,0.9);
  --card-shadow: 0 24px 80px rgba(0,0,0,0.4);
  --blob1: rgba(99,102,241,0.08);
  --blob2: rgba(139,92,246,0.06);
  --blob3: rgba(6,182,212,0.05);
  --blob4: rgba(16,185,129,0.04);
  --tog-bg: rgba(99,102,241,0.1);
  --tog-b: rgba(99,102,241,0.2);
  --inp-bg: rgba(255,255,255,0.03);
  --inp-b: rgba(255,255,255,0.06);
  --inp-focus: rgba(99,102,241,0.3);
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --bg: #ffffff;
  --bg2: #f8fafc;
  --glass: rgba(255,255,255,0.85);
  --glass2: rgba(255,255,255,0.95);
  --gb: rgba(99,102,241,0.08);
  --gb2: rgba(99,102,241,0.15);
  --text: #1e293b;
  --text-main: #0f172a;
  --text-sub: rgba(15,23,42,0.6);
  --text-mid: rgba(15,23,42,0.8);
  --nav-bg: rgba(255,255,255,0.9);
  --footer-bg: rgba(248,250,252,0.95);
  --card-shadow: 0 20px 60px rgba(99,102,241,0.08);
  --blob1: rgba(99,102,241,0.06);
  --blob2: rgba(139,92,246,0.05);
  --blob3: rgba(6,182,212,0.04);
  --blob4: rgba(16,185,129,0.03);
  --tog-bg: rgba(99,102,241,0.05);
  --tog-b: rgba(99,102,241,0.15);
  --inp-bg: rgba(255,255,255,0.9);
  --inp-b: rgba(99,102,241,0.15);
  --inp-focus: rgba(99,102,241,0.3);
}