/* ===========================================================================
   ISD — Colors & Type Foundations
   ===========================================================================
   Brand colors supplied by ISD. Typography uses Source Sans 3 as the nearest
   open-source match to the humanist sans used in the ISD wordmark.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

:root {
  /* ---------- Brand Colors ---------- */
  --isd-red:        #C7074D;   /* primary brand */
  --isd-dark-grey:  #5C6771;   /* secondary brand / body text */
  --isd-purple:     #4C4193;   /* accent — used here for Step 1 (Define) */
  --isd-blue:       #0068B2;   /* accent — used here for Step 2 (Measure) */
  --isd-coral:      #E76863;   /* accent — used here for Step 3 (Collect) */
  --isd-light-grey: #B4B2B1;   /* dividers, muted */

  /* ---------- Surfaces ---------- */
  --surface-paper:  #FAF6F2;   /* warm off-white canvas */
  --surface-white:  #FFFFFF;
  --surface-tint:   #F2EEE9;   /* slightly darker than paper */
  --surface-ink:    #1C2024;   /* near-black for headlines */

  /* ---------- Semantic foregrounds ---------- */
  --fg-1:           #1C2024;   /* headlines */
  --fg-2:           #5C6771;   /* body */
  --fg-3:           #8A929B;   /* tertiary / captions */
  --fg-inverse:     #FFFFFF;
  --fg-brand:       #C7074D;

  /* ---------- Borders ---------- */
  --border-soft:    #E7E3DD;
  --border-mid:     #D6D2CB;
  --border-strong:  #B4B2B1;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(28, 32, 36, 0.06), 0 1px 1px rgba(28, 32, 36, 0.04);
  --shadow-md:  0 4px 12px rgba(28, 32, 36, 0.08), 0 2px 4px rgba(28, 32, 36, 0.04);
  --shadow-lg:  0 16px 40px rgba(28, 32, 36, 0.12), 0 4px 12px rgba(28, 32, 36, 0.06);

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Type ---------- */
  --font-sans:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* type scale (semantic) */
  --t-display:    54px / 1.05 var(--font-sans);
  --t-h1:         38px / 1.15 var(--font-sans);
  --t-h2:         27px / 1.25 var(--font-sans);
  --t-h3:         20px / 1.35 var(--font-sans);
  --t-body:       18px / 1.55 var(--font-sans);
  --t-body-sm:    16px / 1.5  var(--font-sans);
  --t-caption:    13px / 1.4  var(--font-sans);
  --t-eyebrow:    12px / 1.2  var(--font-sans);
}

/* ---------- Base resets ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-paper);
  color: var(--fg-2);
  font: var(--t-body);
  font-feature-settings: "ss01", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { color: var(--fg-1); margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h1 { font: var(--t-h1); }
h2 { font: var(--t-h2); }
h3 { font: var(--t-h3); }
p  { margin: 0; }

a { color: var(--isd-red); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Utility semantic classes ---------- */
.eyebrow {
  font: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--fg-3);
}
.caption { font: var(--t-caption); color: var(--fg-3); }
.serif { font-family: var(--font-serif); }