:root {

  /* ── Palette ── */
  --blue-pale:    #C8DAF8;
  --blue-mid:     #B6CAF6;
  --blue-soft:    #8AAAE8;
  --blue-accent:  #6F97EE;
  --blue-vivid:   #6F97EE;

  --text-dark:    #080808;
  --text-mid:     #404040;
  --text-light:   #9090B0;

  --bg-light:     #F5F9FD;
  --bg-white:     #FFFFFF;

  /* ── Shadows ── */
  --shadow-card:  0 4px 30px rgba(111, 151, 238, 0.08);
  --shadow-soft:  0 20px 60px rgba(111, 151, 238, 0.10);
  --shadow-hover: 0 30px 80px rgba(111, 151, 238, 0.18);

  /* ── Shape ── */
  --radius:       20px;
  --radius-sm:    12px;
  --radius-pill:  100px;

  /* ── Typography ── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Figtree', system-ui, sans-serif;

  /* ── Motion ── */
  --ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur:          0.6s;
  --dur-fast:     0.3s;

  /* ── Fluid Spacing ── */
  --space-xs:  clamp(8px,  1vw,  12px);
  --space-sm:  clamp(16px, 2vw,  24px);
  --space-md:  clamp(24px, 3vw,  40px);
  --space-lg:  clamp(40px, 5vw,  64px);
  --space-xl:  clamp(64px, 7vw, 100px);
  --space-2xl: clamp(80px, 9vw, 140px);

  /* ── Fluid Section Padding ── */
  --section-pad-v:  clamp(64px, 8vw, 120px);
  --section-pad-h:  clamp(20px, 4vw,  48px);

}