/* ================================================
   DESIGN TOKENS — Dark (default)
================================================ */
:root {
  --bg:           #080b14;
  --bg-2:         #0d1120;
  --bg-card:      #0f1525;
  --border:       rgba(99, 102, 241, 0.15);
  --border-hover: rgba(99, 102, 241, 0.45);
  --indigo:       #6366f1;
  --indigo-light: #818cf8;
  --cyan:         #06b6d4;
  --text:         #f1f5f9;
  --text-muted:   #94a3b8;
  --text-dim:     #4b5680;
  --tag-bg:       rgba(99, 102, 241, 0.1);
  --tag-border:   rgba(99, 102, 241, 0.25);
  --glow:         rgba(99, 102, 241, 0.2);
  --glow-cyan:    rgba(6, 182, 212, 0.15);
  --font-head:    'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --nav-scrolled-bg: rgba(8, 11, 20, 0.85);
  --overlay-bg:      rgba(8, 11, 20, 0.97);
  --project-tag-bg:  rgba(255,255,255,0.04);
  --project-tag-bd:  rgba(255,255,255,0.07);
  --code-bar-bg:     rgba(0,0,0,0.3);
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --radius:       12px;
  --radius-lg:    20px;
  --card-shadow:       0 2px 20px rgba(99,102,241,0.08), 0 1px 4px rgba(0,0,0,0.08);
  --card-shadow-hover: 0 8px 40px rgba(99,102,241,0.15), 0 2px 8px rgba(0,0,0,0.1);
}

/* ================================================
   LIGHT THEME — warm cream + deep violet
================================================ */
[data-theme="light"] {
  /* Backgrounds — warm parchment, nothing blue */
  --bg:              #faf9f6;
  --bg-2:            #f2f0eb;
  --bg-card:         #ffffff;

  /* Borders — neutral with a hint of warmth */
  --border:          rgba(0, 0, 0, 0.08);
  --border-hover:    rgba(79, 70, 229, 0.45);

  /* Accents — deeper violet so they pop on cream */
  --indigo:          #4f46e5;
  --indigo-light:    #4338ca;
  --cyan:            #0284c7;

  /* Text — warm near-black */
  --text:            #1c1917;
  --text-muted:      #57534e;
  --text-dim:        #a8a29e;

  /* Components */
  --tag-bg:          rgba(79, 70, 229, 0.07);
  --tag-border:      rgba(79, 70, 229, 0.18);
  --glow:            rgba(79, 70, 229, 0.1);
  --glow-cyan:       rgba(2, 132, 199, 0.08);

  /* Nav / overlay */
  --nav-scrolled-bg: rgba(250, 249, 246, 0.93);
  --overlay-bg:      rgba(250, 249, 246, 0.97);

  /* Project tags */
  --project-tag-bg:  rgba(79, 70, 229, 0.06);
  --project-tag-bd:  rgba(79, 70, 229, 0.15);
  --code-bar-bg:     rgba(79, 70, 229, 0.04);

  /* Shadows — subtle warm drop shadow */
  --card-shadow:       0 2px 16px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --card-shadow-hover: 0 8px 36px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.06);
}