/* Design tokens: colors, typography, spacing, radii.
   Extracted from Framer inline styles for reuse across pages. */

:root {
  /* ── Brand colors ── */
  --color-primary:       rgb(168, 110, 255);   /* CTA purple */
  --color-accent-green:  rgb(24, 184, 136);    /* green accent */
  --color-link:          rgb(0, 153, 255);     /* link blue */

  /* ── Text colors ── */
  --color-heading:       rgb(0, 17, 34);       /* primary headings */
  --color-heading-alt:   rgb(2, 17, 34);       /* heading variant */
  --color-body:          rgb(51, 51, 51);       /* body text */
  --color-muted:         rgb(111, 127, 143);    /* secondary / muted text */
  --color-subtle:        rgb(102, 102, 102);    /* subtle text */
  --color-sub:           rgb(78, 102, 122);     /* hero subtitle */
  --color-sub-alt:       rgb(69, 112, 153);     /* sub-alt text */
  --color-hero-dark:     rgb(5, 47, 87);        /* hero section dark text */
  --color-dark-green:    rgb(35, 56, 49);       /* dark green text */

  /* ── Background colors ── */
  --color-bg-page:       #f2f9fa;               /* page background */
  --color-bg-white:      rgb(255, 255, 255);    /* card/section white */
  --color-bg-light:      rgb(233, 241, 250);    /* light blue bg */
  --color-bg-mint:       rgb(252, 255, 254);    /* very light mint bg */
  --color-bg-badge:      rgb(99, 118, 139);     /* badge / label bg */
  --color-bg-yellow:     #ffd339;               /* accent bar yellow */

  /* ── Accent / decorative ── */
  --color-lavender:      rgb(228, 212, 255);    /* lavender text */
  --color-teal:          rgb(40, 133, 161);     /* teal accent */

  /* ── Hero gradient ── */
  --gradient-hero: linear-gradient(
    180deg,
    rgb(208, 207, 255) 0%,
    rgb(191, 222, 255) 49.5%,
    rgb(189, 232, 230) 100%
  );

  /* ── Typography scale (px) ── */
  --text-3xs:   9px;
  --text-2xs:  10px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  40px;
  --text-6xl:  44px;
  --text-7xl:  50px;
  --text-8xl:  56px;
  --text-9xl:  60px;
  --text-10xl: 80px;
  --text-11xl: 90px;
  --text-12xl: 120px;
  --text-hero: 160px;

  /* ── Font weights ── */
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-black:      900;

  /* ── Spacing scale ── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 60px;
  --space-3xl: 100px;

  /* ── Border radii ── */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 667px;
  --radius-full: 100%;

  /* ── Breakpoints (reference only; used in @media rules) ── */
  --bp-desktop:    1200px;
  --bp-tablet-max: 1199.98px;
  --bp-tablet-min:  810px;
  --bp-phone-max:   809.98px;
}