/* ═══════════════════════════════════════════════════
   CareerCraft AI — Design Tokens & Theme Variables
   Shared across ALL pages. Single source of truth.
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --purple: #7C6AFF;
  --teal: #00D4AA;
  --pink: #FF6AC2;

  /* ── Semantic Aliases ── */
  --accent: #7C6AFF;
  --accent-hover: #9B8AFF;
  --accent-light: rgba(124,106,255,0.10);
  --accent2: #00D4AA;
  --accent2-light: rgba(0,212,170,0.08);
  --accent3: #FF6AC2;
  --green: #00D4AA;
  --red: #FF4757;

  /* ── Backgrounds ── */
  --bg: #05050A;
  --bg2: #0A0A12;
  --surface: rgba(255,255,255,0.03);
  --surface-hover: rgba(255,255,255,0.06);

  /* ── Text ── */
  --text: #FFFFFF;
  --text-body: #E0E0E0;
  --text-secondary: #C0C0C8;
  --text-muted: #888890;
  --text-dim: rgba(255,255,255,0.12);

  /* ── Borders ── */
  --border: rgba(255,255,255,0.06);
  --border-hi: rgba(255,255,255,0.10);
  --line-dim: rgba(255,255,255,0.10);

  /* ── Misc ── */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --transition: 0.2s ease;
}

/* ── Light Mode Overrides ── */
[data-theme=light] {
  --bg: #F8F8FC;
  --bg2: #F0F0F8;
  --surface: rgba(255,255,255,0.70);
  --surface-hover: rgba(255,255,255,0.90);

  --accent: #6248FF;
  --accent-hover: #5038E0;
  --accent-light: rgba(98,72,255,0.08);
  --accent2: #00B894;
  --accent2-light: rgba(0,184,148,0.06);
  --accent3: #E84393;
  --green: #00B894;
  --purple: #6248FF;
  --teal: #00B894;
  --pink: #E84393;
  --red: #E84118;

  --text: #000000;
  --text-body: #1a1a1a;
  --text-secondary: #333333;
  --text-muted: #666666;
  --text-dim: rgba(13,13,20,0.12);

  --border: rgba(0,0,0,0.06);
  --border-hi: rgba(0,0,0,0.10);
  --line-dim: rgba(13,13,20,0.12);
}

/* ── Mesh Gradient Background (dark) ── */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 400px at 20% 20%, rgba(124,106,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 80% 30%, rgba(0,212,170,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 80%, rgba(255,106,194,0.06) 0%, transparent 70%);
  animation: meshShift 20s ease-in-out infinite alternate;
}
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 600px 400px at 20% 20%, rgba(98,72,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 80% 30%, rgba(0,184,148,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 80%, rgba(232,67,147,0.03) 0%, transparent 70%);
}
@keyframes meshShift {
  0% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-20px,15px) scale(1.02); }
  66% { transform: translate(15px,-10px) scale(0.98); }
  100% { transform: translate(-10px,20px) scale(1.01); }
}

/* ── Neural Grid Overlay ── */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.03;
  background-image:
    linear-gradient(#7C6AFF 1px, transparent 1px),
    linear-gradient(90deg, #7C6AFF 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}