/* ============================================================
   RESI master brand — design tokens
   Source of truth: RESI Font Package + Colors spec (Figma Kolor System
   7woColnbHO3ZDRQ7ham6DP). Same type family as the report + lab.

   Type: Crimson Pro (New York stand-in) = Title/H1 only.
         Plus Jakarta Sans = H2/H3/body/UI/caption/meta.
         Specials (Glock/Italiana/Questrial) = poster/editorial display only.
   Sizes below are the spec's size/line-height-% pairs.
   ============================================================ */

:root {
  /* ---- Color: ODI-inherited palette ---- */
  --paper:      #f4f1ea;   /* warm paper — page background */
  --paper-2:    #ece8df;   /* faint panel fill (empty grid cells) */
  --ink:        #000000;   /* 100% black — display + body text */
  --grey:       #737376;   /* COLOR 01 — muted captions/meta */
  --blue-1:     #c3e0f2;   /* COLOR 02 */
  --blue-2:     #dcebf2;   /* COLOR 03 */
  --green-dk:   #152621;   /* COLOR 04 — dark surface (near-black green) */
  --coral:      #cb5b58;   /* COLOR 05 */
  --navy:       #1b357d;   /* COLOR 06 — ODI parent navy (ticker)  [approx; exact hex pending] */
  --yellow:     #f0cc29;   /* COLOR 07 */
  --accent-sky: #91daff;   /* Special Accent — pull quotes, key data, highlights */

  --on-dark:    #f4f1ea;   /* paper-tint text on dark/navy surfaces */

  /* ---- Type families ---- */
  --font-display: "Crimson Pro", "Times New Roman", serif;       /* Title / H1 */
  --font-sans:    "Plus Jakarta Sans", system-ui, sans-serif;    /* everything else */
  --font-editorial: "Italiana", Georgia, serif;                  /* special display */
  --font-geometric: "Questrial", var(--font-sans);               /* special display */
  --font-poster:    "Glock", "Playfair Display", "Italiana", Georgia, serif;  /* poster display — Glock when supplied; Playfair (heavy) stand-in */

  /* ---- Type roles (size / line-height %, per spec) ---- */
  --t-title:   clamp(3.25rem, 9vw, 7.5rem); --lh-title: 1.0;   /* 120/100 — Hero/Cover */
  --t-h1:      clamp(2.5rem, 6vw, 4.5rem);  --lh-h1:    1.05;  /* 72/105  — Section hero */
  --t-h2:      clamp(1.9rem, 3.6vw, 3rem);  --lh-h2:    1.15;  /* 48/115  — Section heading (Jakarta Bold) */
  --t-h3:      1.75rem;                      --lh-h3:    1.30;  /* 28/130  — Subheading (Jakarta Semibold) */
  --t-body:    1rem;                         --lh-body:  1.60;  /* 16/160  — Reading (Jakarta Regular) */
  --t-ui:      0.875rem;                     --lh-ui:    1.50;  /* 14/150  — UI / portal copy */
  --t-caption: 0.6875rem;                    --lh-cap:   1.50;  /* 11/150  — ALL CAPS, +3% track */
  --t-meta:    0.75rem;                      --lh-meta:  1.50;  /* 12/150  — footnotes / dates */
  --track-caps: 0.03em;

  /* ---- Layout / motion ---- */
  --gutter:  clamp(1.25rem, 4vw, 4rem);
  --maxw:    84rem;
  --rule:    1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur:     0.4s;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---- Type role classes ---- */
.t-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-title); line-height: var(--lh-title); letter-spacing: -0.01em; }
.t-h1    { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1); line-height: var(--lh-h1); }
.t-h2    { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-h2); line-height: var(--lh-h2); }
.t-h3    { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-h3); }
.t-body  { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-body); }
.t-ui    { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-ui); line-height: var(--lh-ui); }
.t-caption { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-caption); line-height: var(--lh-cap); letter-spacing: var(--track-caps); text-transform: uppercase; }
.t-meta  { font-family: var(--font-sans); font-weight: 300; font-size: var(--t-meta); line-height: var(--lh-meta); }

/* shared content shell */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }