/* ============================================================
   style-guide.css — design variables (the single source of truth)
   Values derived from the live site (computed styles) + palette.
   ============================================================ */
:root {
  /* ---- Brand colors ---- */
  --c-primary:        #5046e5;   /* indigo — buttons, eyebrows, links, highlight words */
  --c-primary-strong: #4338ca;   /* darker indigo */
  --c-primary-soft:   #bec2ff;   /* periwinkle */

  /* ---- Text ---- */
  --c-heading:     #1c1a4e;      /* darkest navy — H1/H2/H3 titles */
  --c-text:        #646192;      /* body paragraphs (muted blue-grey) */
  --c-text-strong: #292478;      /* bold inline text / strong navy */
  --c-on-dark:     #ffffff;      /* text on navy/indigo surfaces */
  --c-on-dark-dim: #aeb4dd;      /* dimmed text on dark footer */

  /* ---- Surfaces / backgrounds (treated as core) ---- */
  --surface-page:     #ffffff;
  --surface-band:     #eef2ff;                 /* lavender section band */
  --surface-band-50:  rgba(238, 242, 255, .5); /* lavender @ 50% */
  --surface-card:     #ffffff;
  --surface-footer:   #292478;                 /* navy footer */
  --grad-section:     linear-gradient(180deg, #ffffff 0%, rgba(238, 242, 255, .5) 100%);
  --grad-hero:
    radial-gradient(40% 60% at 12% 12%, rgba(238, 242, 255, .55) 0%, rgba(238, 242, 255, 0) 60%),
    radial-gradient(45% 65% at 88% 85%, rgba(238, 242, 255, .55) 0%, rgba(238, 242, 255, 0) 60%),
    #ffffff;

  /* ---- Lines & state colors ---- */
  --c-border:    #e8eaf6;        /* subtle card/section border */
  --c-success:   #16c79a;        /* positive (up arrows) */
  --c-danger:    #e0476b;        /* negative (down arrows) */
  --c-disabled:  #6f6aa5;        /* "Coming soon" muted button */

  /* ---- Shadows ---- */
  --shadow-card: 0 2px 8px rgba(28, 26, 78, .04), 0 12px 30px rgba(28, 26, 78, .06);
  --shadow-pill: 0 8px 22px rgba(28, 26, 78, .10);
  --shadow-lg:   0 30px 70px rgba(28, 26, 78, .14);

  /* ---- Radii ---- */
  --r-btn:   10px;     /* matches live button radius */
  --r-card:  16px;
  --r-panel: 24px;
  --r-pill:  999px;

  /* ---- Typography (Inter) ---- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-hero:     clamp(34px, 4.6vw, 56px);
  --fs-h2:       clamp(28px, 3.4vw, 44px);
  --fs-h3:       22px;
  --fs-eyebrow:  15px;
  --fs-lead:     19px;     /* section lead paragraphs */
  --fs-body:     17px;
  --fs-sm:       15px;
  --fs-nav:      16px;
  --lh-tight:    1.08;
  --lh-snug:     1.3;
  --lh-body:     1.6;
  --ls-tight:    -0.02em;
  --ls-eyebrow:  0.08em;

  /* ---- Layout ---- */
  --container: 1660px;
  --gutter: 24px;
  --section-pad: clamp(28px, 3.5vw, 56px);
  --header-h: 84px;

  /* ---- Motion ---- */
  --ease: 0.3s ease-in-out;   /* matches live button transition */
}

/* Breakpoints used across the build: 1280 / 768 / 390
   (desktop default · tablet ≤768 · phone ≤390) */