/* =====================================================
   VARIABLES.CSS — Theme Tokens
   Light theme = default | Dark theme = [data-theme="dark"]
===================================================== */

:root {
  /* Brand */
  --primary:        #0b33e8;
  --primary-light:  #4895ef;
  --secondary:      #3f37c9;
  --accent:         #f07c00;
  --accent-light:   #ffb347;
  --neon:            #0b33e8;
 /* --neon:           #00d4ff; */
  /* Backgrounds */
  --bg:             #f8f9fa;
  --bg-alt:         #ffffff;
  --surface:        #ffffff;
  --surface-2:      #eef1fb;

  /* Hero / dark sections stay dark regardless of theme */
  --hero-from:      #0d1b2a;
  --hero-to:        #1b263b;

  /* Borders */
  --border:         #e0e5f2;

  /* Text */
  --text:           #1a1f36;
  --text-muted:     #5a6380;
  --text-light:     #9099b5;
  --heading:        #0a1020;

  /* Services section (neutral mode) */
  --svc-bg-from:    #1e2a40;
  --svc-bg-to:      #253350;
  --svc-card-bg:    rgba(255,255,255,0.06);
  --svc-card-border:rgba(255,255,255,0.12);
  --svc-text:       #e8edf8;
  --svc-sub:        rgba(255,255,255,0.65);

  /* Shadows */
  --shadow-sm:  0 2px 10px rgba(11,51,232,0.07);
  --shadow-md:  0 8px 30px rgba(11,51,232,0.12);
  --shadow-lg:  0 20px 60px rgba(11,51,232,0.15);

  /* Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-full: 999px;

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 280ms cubic-bezier(.4,0,.2,1);
  --t-slow: 500ms cubic-bezier(.4,0,.2,1);

  /* Nav height */
  --nav-h: 75px;

  /* Fonts */
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

/* ── Dark Theme ────────────────────────────────────── */
[data-theme="dark"] {
  --bg:         #0c1020;
  --bg-alt:     #111827;
  --surface:    #141d2e;
  --surface-2:  #1a2540;
  --border:     #1e2d4a;

  --text:       #e4eaf8;
  --text-muted: #8c99bb;
  --text-light: #4e5e80;
  --heading:    #f0f4ff;

  --shadow-sm:  0 2px 10px rgba(0,0,0,0.3);
  --shadow-md:  0 8px 30px rgba(0,0,0,0.4);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.5);
}