/* ==========================================================================
   Design Tokens — extracted from Figma (file: fvstdNH2uudrctzJ5Tsarj)
   Generated: 2026-03-09
   ========================================================================== */

:root {
  /* ── Colors ── */
  --color-primary:       #1f2c42;   /* Dark navy — headings, primary text */
  --color-secondary:     #5e6f8d;   /* Muted blue-gray — body text, descriptions */
  --color-accent:        #675f8f;   /* Purple accent */
  --color-accent-light:  #8b84b0;   /* Light purple */
  --color-accent-bg:     #bfb8e5;   /* Very light purple — backgrounds */
  --color-dark:          #312d4a;   /* Dark purple-navy */
  --color-dark-alt:      #4b456d;   /* Medium dark purple */
  --color-highlight:     #c2d7ff;   /* Light blue highlight */
  --color-white:         #ffffff;
  --color-black:         #000000;

  /* ── Typography — Font Families ── */
  --font-primary:   'Poppins', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* ── Typography — Font Sizes ── */
  --text-sm:    14px;   /* Small text, captions */
  --text-base:  16px;   /* Body text, nav links */
  --text-md:    20px;   /* Subtitles, card titles */
  --text-lg:    24px;   /* Section subtitles */
  --text-xl:    36px;   /* Section headings */
  --text-2xl:   48px;   /* Large headings */
  --text-3xl:   64px;   /* Hero subtitle */
  --text-4xl:   80px;   /* Hero heading */
  --text-5xl:   96px;   /* Feature numbers / decorative */

  /* ── Typography — Font Weights ── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Layout ── */
  --max-width:       1440px;
  --breakpoint-mobile: 430px;
  --breakpoint-desktop: 1920px;

  /* ── Spacing (based on 8px grid) ── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ── Border Radius ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill:  9999px;

  /* ── Hero gradient stops — issue #17 ── */
  --color-hero-start:  #1a2540;   /* Deep navy start */
  --color-hero-mid1:   #2a2548;   /* Navy-purple mid */
  --color-hero-mid2:   #3d3568;   /* Purple mid */
  --color-hero-end:    #1f2c42;   /* Deep navy end (= --color-primary) */
  --color-hero-grad2:  #9b8fcc;   /* Heading gradient end — light purple */
}