/* ============================================================
   OxerLine Advisory: Colors & Type
   Canonical foundation. Import this, or copy :root into your <style>.
   Three families, three jobs (see README → Type):
     Serif  Cormorant Garamond: "what we believe" (display headlines, quotes, figures)
     Sans   Figtree          : "what we say"      (body, UI, structural headings, wordmark)
     Mono   IBM Plex Mono    : "what we found"    (eyebrows, exhibit/figure tags, metadata)
   Add to <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Figtree:ital,wght@0,300..900;1,300..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --teal:            #1F6B5A;   /* primary: brand green, the upper rail */
  --teal-light:      #339882;   /* brighter fills, a clear step up (not a hover state) */
  --teal-hover:      #185545;   /* CTA hover: primary teal darkens ONE shade */
  --teal-deep:       #123F35;   /* pressed / deep panels */
  --sage:            #7FA89B;   /* secondary rail on dark grounds */
  --maroon:          #6A1B2A;   /* accent 1: labels, alerts, banners */
  --maroon-muted:    #9E5663;   /* secondary rail on maroon grounds */
  --navy:            #2E4A66;   /* accent 2: ink navy; cool anchor, text-safe on light */
  --honey:           #C7972F;   /* accent 3: honey amber; decorative (rules, fills, large marks) */
  --honey-deep:      #7A5C12;   /* text-safe honey, passes AA on light for small text */
  --graphite:        #1F1F1F;   /* primary text, dark grounds */

  /* ---- Neutrals (warm) ---- */
  --ivory:           #F8F6F1;   /* page background */
  --stone:           #E5E2DD;   /* hairlines, dividers, subtle fills */
  --warm-gray:       #C8C3B8;   /* secondary rail on light grounds */
  --warm-gray-light: #D4D0C9;   /* disabled, muted strokes */
  --white:           #FFFFFF;

  /* ---- Semantic text ---- */
  --fg-1:    var(--graphite);              /* primary text */
  --fg-2:    #4A4A47;                       /* body / secondary */
  --fg-3:    #6B6760;                       /* captions, muted, darkened to clear WCAG AA 4.5:1 on ivory */
  --fg-on-teal:   #FFFFFF;
  --fg-on-teal-2: rgba(255,255,255,0.78);
  /* NOTE: --warm-gray is LARGE / DECORATIVE only (rails, the “Advisory” sub in
     the wordmark). It fails AA for small body/caption text on light, use
     --fg-3 for any small muted text instead. */

  /* ---- Semantic surface ---- */
  --bg-page:   var(--ivory);
  --bg-card:   var(--white);
  --bg-sunken: var(--stone);
  --bg-brand:  var(--teal);
  --bg-accent: var(--maroon);

  --border:        var(--stone);
  --border-strong: var(--warm-gray);

  /* ---- Contextual / status (warm-tuned; all pass AA ≥4.5:1 as text on ivory) ----
     Use for document status, table flags, small markers, not large fills. */
  --success: #2F7355;   /* deeper than brand teal, reads as “good” */
  --warning: #BE6B1E;   /* amber-orange: reads as caution (fills/badges); see --warning-text for small text */
  --warning-text: #8A4A12;  /* AA-safe deep amber for small text on ivory */
  --error:   #A6342A;   /* brick red, distinct from brand maroon */
  --info:    var(--navy);   /* reuses the ink-navy accent */

  /* ---- Data-viz palette ---- */
  /* Categorical: brand-anchored, max contrast between neighbors */
  --dv-1: #1F6B5A;  /* teal */
  --dv-2: #6A1B2A;  /* maroon */
  --dv-3: #C7972F;  /* honey */
  --dv-4: #2E4A66;  /* navy */
  --dv-5: #7FA89B;  /* sage */
  --dv-6: #9E5663;  /* muted maroon */
  /* Sequential (teal ramp, light→dark) for heatmaps / single-measure */
  --dv-seq-1: #DCE8E3;
  --dv-seq-2: #A9CCC1;
  --dv-seq-3: #6FA797;
  --dv-seq-4: #3D8470;
  --dv-seq-5: #1F6B5A;
  --dv-seq-6: #123F35;
  /* Print: render charts with these exact hues: add
     -webkit-print-color-adjust: exact; print-color-adjust: exact; to the chart container. */

  /* ---- Typography ---- */
  --sans:  'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  /* --mono is a WEB-SURFACE ACCENT ONLY (eyebrows/labels/technical bits on the
     site). Documents stay two-font: Cormorant + Figtree. Do not use mono in
     printed deliverables: it reads busy in dense copy and tables. */
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans: var(--sans);   /* back-compat alias */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Type scale (semantic) ---- */
  /* Display: SERIF editorial headlines (Cormorant). Big sizes only. */
  --display-family: var(--serif);
  --display-size: 60px;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --display-leading: 1.04;

  /* H1: SERIF page / document titles */
  --h1-family: var(--serif);
  --h1-size: 38px;
  --h1-weight: 500;
  --h1-tracking: 0;
  --h1-leading: 1.12;

  /* H2: SANS structural section headers (teal) */
  --h2-family: var(--sans);
  --h2-size: 20px;
  --h2-weight: 600;
  --h2-color: var(--teal);
  --h2-leading: 1.3;

  /* H3: SANS sub-section */
  --h3-family: var(--sans);
  --h3-size: 15px;
  --h3-weight: 600;
  --h3-tracking: 0.3px;

  /* Wordmark: SANS (the logo lockup; not editorial display) */
  --wordmark-family: var(--sans);
  --wordmark-weight: 700;      /* "OxerLine" weight — matches lockups.html (was 800) */
  --wordmark-tracking: 0.01em; /* was 0.1em */
  /* "Advisory" sub-word: weight 300, letter-spacing 0.04em, ~0.72 opacity on dark */

  /* Body */
  --body-size: 14px;
  --body-weight: 300;
  --body-leading: 1.8;
  --body-color: var(--fg-2);

  /* Lead: intro paragraph */
  --lead-size: 17px;
  --lead-weight: 300;
  --lead-leading: 1.7;

  /* Caption */
  --caption-size: 11px;
  --caption-weight: 300;
  --caption-tracking: 0.5px;
  --caption-color: var(--fg-3);

  /* Label: eyebrow / kicker, SANS, all-caps, letter-spaced (maroon) */
  --label-family: var(--sans);
  --label-size: 11px;
  --label-weight: 600;
  --label-color: var(--maroon);
  --label-tracking: 1.6px;

  /* Meta / data: SANS small: dates, doc IDs, table heads, captions */
  --meta-family: var(--sans);
  --meta-size: 11px;
  --meta-weight: 400;
  --meta-tracking: 0.04em;
  --meta-color: var(--fg-3);

  /* ---- 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;
  --section-gap: 28px;

  /* ---- Layout ---- */
  --page-max-width: 740px;
  --page-padding: 40px 48px 64px;

  /* ---- Radii: small & restrained ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Elevation: low, warm, diffuse ---- */
  --shadow-sm: 0 1px 2px rgba(31,31,31,0.06);
  --shadow-md: 0 2px 8px rgba(31,31,31,0.08);
  --shadow-lg: 0 8px 28px rgba(31,31,31,0.10);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   Semantic type classes: apply directly
   ============================================================ */
.display {
  font: var(--display-weight) var(--display-size)/var(--display-leading) var(--display-family);
  letter-spacing: var(--display-tracking);
  color: var(--fg-1);
}
.display em, .display i { font-style: italic; color: var(--maroon); }
.h1 {
  font: var(--h1-weight) var(--h1-size)/var(--h1-leading) var(--h1-family);
  letter-spacing: var(--h1-tracking);
  color: var(--fg-1);
}
.h2 {
  font: var(--h2-weight) var(--h2-size)/var(--h2-leading) var(--h2-family);
  color: var(--h2-color);
}
.h3 {
  font: var(--h3-weight) var(--h3-size) var(--h3-family);
  letter-spacing: var(--h3-tracking);
  color: var(--fg-1);
}
.lead {
  font: var(--lead-weight) var(--lead-size)/var(--lead-leading) var(--font-sans);
  color: var(--fg-2);
}
.body {
  font: var(--body-weight) var(--body-size)/var(--body-leading) var(--font-sans);
  color: var(--body-color);
}
.caption {
  font: var(--caption-weight) var(--caption-size) var(--font-sans);
  letter-spacing: var(--caption-tracking);
  color: var(--caption-color);
}
.label {
  font: var(--label-weight) var(--label-size) var(--label-family);
  letter-spacing: var(--label-tracking);
  color: var(--label-color);
  text-transform: uppercase;
}
.meta {
  font: var(--meta-weight) var(--meta-size) var(--meta-family);
  letter-spacing: var(--meta-tracking);
  color: var(--meta-color);
}
.wordmark {
  font-family: var(--wordmark-family);
  font-weight: var(--wordmark-weight);
  letter-spacing: var(--wordmark-tracking);
}
