/* Just Mercy · design tokens + typography classes
   Same architecture as the NSA build: everything rides the fluid root
   (fluid-root.css) through rem; fluid heading clamps are the documented
   exception, generated with the fluid-type skill (fluid.mjs clamp 390→1440).
   Bricks global classes are NAME-ONLY — the class objects in Bricks carry no
   settings; these rules are the single source of truth.

   STATUS: SEED SCAFFOLD (2026-08-29). Colour values marked [seed] are the
   known brand basics from the Figma file; the full Brand (27) + Semantic (9)
   variable sets, the real type scale, and spacing get populated verbatim at
   Phase 2 Figma inventory (JM Website HejjbmXxVo85wdUNENknsb). */

:root {
  /* Brand [seed — replace with the full Figma Brand Colors set] */
  --purple-500: #2D008F;  /* [seed] primary brand purple */
  --gold-500: #F7BF0A;    /* [seed] brand gold */
  --cream: #FAF2E1;       /* [seed] brand cream / light background */

  /* Neutrals [placeholder until Figma inventory] */
  --ink: #1A1523;         /* headings */
  --body-color: #3D3548;  /* body text */
  --muted: #6B6474;       /* captions, secondary */
  --line: #E8E2D5;        /* borders, dividers */
  --white: #FFFFFF;

  /* Semantic [populate from Figma Semantic Colors (9) at inventory] */
  --bg-page: var(--cream);
  --accent: var(--purple-500);
  --scrim: rgba(20, 10, 40, 0.55);
  --ring: rgba(45, 0, 143, 0.18);  /* focus ring, 3px spread of purple-500 */

  /* Spacing (rem, rides the fluid root) */
  --space-2xs: 0.5rem;   /* 8 */
  --space-xs: 0.75rem;   /* 12 */
  --space-s: 1rem;       /* 16 */
  --space-m: 1.5rem;     /* 24 */
  --space-l: 2rem;       /* 32 */
  --space-xl: 2.5rem;    /* 40 */
  --space-2xl: 3rem;     /* 48 */
  --space-3xl: 4.5rem;   /* 72 */
  --space-4xl: 6rem;     /* 96 */
  --gutter: 1.5rem;                        /* page side padding, mobile */
  --section-pad: clamp(2.5rem, 6vw, 6rem); /* vertical section rhythm */

  /* Radii [confirm against Figma at inventory] */
  --radius-s: 0.625rem;
  --radius-m: 0.75rem;
  --radius-l: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  /* Layout */
  --container: 70rem;    /* 1120 content width at 1440 [confirm] */

  /* Fluid heading clamps (fluid.mjs clamp, 390 → 1440)
     [placeholder px pairs — regenerate with the real Figma type scale] */
  /* 38px @390 → 56px @1440 */
  --text-display: clamp(2.375rem, 1.957142857142857rem + 1.7142857142857144vw, 3.5rem);
  /* 28px @390 → 44px @1440 */
  --text-h1: clamp(1.75rem, 1.3785714285714286rem + 1.5238095238095237vw, 2.75rem);
  /* 28px @390 → 40px @1440 */
  --text-h2: clamp(1.75rem, 1.4714285714285715rem + 1.1428571428571428vw, 2.5rem);
  /* 20px @390 → 24px @1440 */
  --text-h3: clamp(1.25rem, 1.157142857142857rem + 0.38095238095238093vw, 1.5rem);

  /* Static type tokens (rem, ride the fluid root)
     [populate from Figma text styles Display/Heading/Body/Label/Overline] */
  --text-body-lead: 1.125rem;  /* 18 */
  --text-body: 1rem;           /* 16 */
  --text-body-s: 0.9375rem;    /* 15 */
  --text-caption: 0.8125rem;   /* 13 */
  --text-micro: 0.75rem;       /* 12 */
  --text-eyebrow: 0.75rem;     /* 12 · overline/label style */
  --text-button: 0.9375rem;    /* 15 */
  --text-nav: 0.875rem;        /* 14 */
}

/* ---- Typography classes ----
   Applied via Bricks global classes of the same name (name-only). Host
   Grotesk is the brand face (fonts.css, self-hosted after licence check). */

.heading-style-display, .heading-style-h1, .heading-style-h2, .heading-style-h3 {
  font-family: "Host Grotesk", sans-serif;
  color: var(--ink);
}
.heading-style-display { font-size: var(--text-display); line-height: 1.1; }
.heading-style-h1 { font-size: var(--text-h1); line-height: 1.2; }
.heading-style-h2 { font-size: var(--text-h2); line-height: 1.25; }
.heading-style-h3 { font-size: var(--text-h3); line-height: 1.33; }

.text-style-lead, .text-style-body, .text-style-small,
.text-style-caption, .text-style-micro {
  font-family: "Host Grotesk", sans-serif;
  font-weight: 400;
  color: var(--body-color);
}
.text-style-lead { font-size: var(--text-body-lead); line-height: 1.6; }
.text-style-body { font-size: var(--text-body); line-height: 1.6; }
.text-style-small { font-size: var(--text-body-s); line-height: 1.6; }
.text-style-caption { font-size: var(--text-caption); line-height: 1.5; color: var(--muted); }
.text-style-micro { font-size: var(--text-micro); line-height: 1.45; color: var(--muted); }
.text-style-eyebrow {
  font: 600 var(--text-eyebrow)/1.35 "Host Grotesk", sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}