:root {
  --navy:          #4848a8;
  --navy-dark:     #3a3a8f;
  --navy-light:    #6157b8;
  --indigo-deep:   #504fac;

  --teal:          #A2EAD3;
  --teal-dark:     #45bda9;
  --teal-light:    #8fe8c8;

  --purple:        #9a8ce4;
  --purple-dark:   #7a6cd4;
  --purple-light:  #c1b8ed;

  --blue:          #67c3d8;
  --green:         #a4edd0;

  --ink:           #4848a8;
  --body:          #4b4b87;
  --muted:         #6b6bad;

  --white:         #ffffff;
  --surface:       #ffffff;
  --surface-alt:   #f9f9f9;
  --line:          #eae8f4;

  --danger:        #d9534f;
  --success:       #45bda9;
  --warning:       #ef9a3d;


  --navy-rgb:      72, 72, 168;
  --white-rgb:     255, 255, 255;


  --grad-brand:    linear-gradient(90deg, #9D88E5 0%, #86CED7 50%, #A8F0D2 100%);
  --grad-text:     linear-gradient(90deg, #9D88E5 0%, #86CED7 50%, #A8F0D2 100%);
  --grad-mix:      linear-gradient(90deg, #9a8ce4 0%, #74d2e2 55%, #a4edd0 100%);
  --grad-cool:     linear-gradient(95deg, #8b7fd6 0%, #7cc7d0 60%, #6fd0c8 100%);
  --grad-hero:     linear-gradient(107deg, #ffffff 0%, #e4e8f6 25%, #a9d7ec 57%, #a2ead2 100%);
  --grad-panel:    linear-gradient(135deg, #9D88E5 0%, #86CED7 55%, #A8F0D2 100%);
  --grad-glass:    linear-gradient(150deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.34) 100%);
  --grad-ring:     linear-gradient(125deg, #9a8ce4 0%, #b9c7ee 45%, #d8f2ef 75%, #a4edd0 100%);


  --font-body:     'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display:  'Lexend Exa', 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:       11px;
  --text-sm:       13px;
  --text-base:     15px;
  --text-md:       16px;
  --text-lg:       18px;
  --text-xl:       20px;
  --text-2xl:      24px;
  --text-3xl:      30px;
  --text-4xl:      38px;
  --text-5xl:      44px;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight: -.01em;
  --tracking-wide:   .06em;
  --tracking-caps:   .16em;


  --space-2xs:   4px;
  --space-xs:    8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;


  --section-y:     100px;
  --section-y-sm:   64px;
  --section-y-lg:  128px;


  --hero-min: 720px;


  --radius-sm:    8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-2xl:  30px;
  --radius-pill: 999px;


  /* Three levels of lift, plus one halo. Every shadow on the site is one of
   these four — never a hand-written value. */
  --shadow-sm:    0 6px 18px rgba(var(--navy-rgb), .08);
  --shadow-md:    0 16px 40px rgba(var(--navy-rgb), .12);
  --shadow-lg:    0 26px 60px rgba(var(--navy-rgb), .16);
  --shadow-frame: 0 0 20px rgba(35, 45, 95, .13), 0 8px 26px rgba(35, 45, 95, .12);
  --shadow-btn:   0 10px 24px rgba(154, 140, 228, .30);


  --header-height:  92px;
  --shot-max:      620px;
  --prose-max:     760px;


  --ease:        cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-base: 180ms;
  --duration-slow: 220ms;


  --z-base:     1;
  --z-sticky:  10;
  --z-header:  50;
  --z-modal: 1050;


  --bs-primary:               #4848a8;
  --bs-primary-rgb:           72, 72, 168;
  --bs-primary-text-emphasis: #3a3a8f;
  --bs-secondary:             #A2EAD3;
  --bs-secondary-rgb:         111, 207, 196;

  --bs-body-color:       #4b4b87;
  --bs-body-color-rgb:   75, 75, 135;
  --bs-body-bg:          #ffffff;
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size:   var(--text-md);
  --bs-body-line-height: var(--leading-normal);

  --bs-heading-color: #4848a8;

  --bs-link-color:       #4848a8;
  --bs-link-color-rgb:   72, 72, 168;
  --bs-link-hover-color: #3a3a8f;
  --bs-link-decoration:  none;

  --bs-border-radius:      var(--radius-lg);
  --bs-border-radius-sm:   var(--radius-md);
  --bs-border-radius-lg:   var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-border-color:       rgba(var(--navy-rgb), .16);
}

/* Section rhythm steps down with the viewport — 100px between stacked blocks
   on a phone reads as dead space rather than breathing room. */
@media (max-width: 991.98px) {
  :root { --section-y: 72px; --section-y-sm: 48px; --section-y-lg: 88px; }
}
@media (max-width: 575.98px) {
  :root { --section-y: 56px; --section-y-sm: 40px; --section-y-lg: 68px; }
}