/* ─────────────────────────────────────────────────────────────
   information-governance.org · design tokens · v1.0 · August 2026
   Light scheme only. A dark scheme is deferred to v1.1.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── ground ── */
  --ig-parchment:   #F3F0E6;   /* page ground                          */
  --ig-vellum:      #E7E2D4;   /* panels, table stripes, inset blocks  */
  --ig-bone:        #FBFAF6;   /* cards raised off the ground          */
  --ig-deep:        #0F241D;   /* inverted surfaces, cover, footer     */

  /* ── structure and text ── */
  --ig-delta:       #16332A;   /* body text, headings, structure       */
  --ig-commons:     #2F6B52;   /* primary brand green, rules, marks    */
  --ig-reed:        #77837B;   /* meta, captions ≥ 16px only           */
  --ig-reed-deep:   #5E6B63;   /* meta at body sizes                   */

  /* ── accent ── */
  --ig-meridian:      #5BA3B4; /* graphics only, never body text on light */
  --ig-meridian-text: #2A6E7D; /* links and accent text on light          */
  --ig-meridian-soft: #BEDCE2; /* fills, highlights, selection            */

  /* ── data ramp, 01 → 05 ── */
  --ig-ramp-1: #16332A;
  --ig-ramp-2: #234C3E;
  --ig-ramp-3: #2F6B52;
  --ig-ramp-4: #3E8A83;
  --ig-ramp-5: #5BA3B4;

  /* ── rules ── */
  --ig-rule:        rgba(22, 51, 42, 0.14);
  --ig-rule-heavy:  rgba(22, 51, 42, 0.26);
  --ig-rule-light:  rgba(22, 51, 42, 0.07);
  --ig-rule-invert: rgba(251, 250, 246, 0.16);

  /* ── type ── */
  --ig-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --ig-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ig-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ig-step--1: 0.8125rem;   /* 13px · caption, meta          */
  --ig-step-0:  1.0625rem;   /* 17px · body                   */
  --ig-step-1:  1.3125rem;   /* 21px · lead, sub-head         */
  --ig-step-2:  1.75rem;     /* 28px · section head           */
  --ig-step-3:  2.5rem;      /* 40px · page title             */
  --ig-step-4:  3.5rem;      /* 56px · cover                  */

  --ig-lh-body: 1.62;
  --ig-lh-head: 1.18;
  --ig-track-head: -0.012em;
  --ig-track-label: 0.26em;

  /* ── measure and rhythm ── */
  --ig-measure: 34rem;       /* ~66 characters at step 0      */
  --ig-shell:   72rem;
  --ig-gutter:  clamp(20px, 5vw, 64px);
  --ig-radius:  4px;         /* the only radius in the system */
}

/* ── base ─────────────────────────────────────────────────── */
body {
  background: var(--ig-parchment);
  color: var(--ig-delta);
  font-family: var(--ig-serif);
  font-size: var(--ig-step-0);
  line-height: var(--ig-lh-body);
}

h1, h2, h3 { font-family: var(--ig-serif); font-weight: 600;
             line-height: var(--ig-lh-head); letter-spacing: var(--ig-track-head); }

a { color: var(--ig-meridian-text); text-decoration-thickness: 1px;
    text-underline-offset: 0.18em; }
a:hover { color: var(--ig-commons); }
::selection { background: var(--ig-meridian-soft); }
:focus-visible { outline: 2px solid var(--ig-meridian-text); outline-offset: 3px; }

/* ── labels and metadata ──────────────────────────────────── */
.ig-label { font-family: var(--ig-sans); font-size: 10px; font-weight: 600;
            letter-spacing: var(--ig-track-label); text-transform: uppercase;
            color: var(--ig-reed-deep); }
.ig-kicker { font-family: var(--ig-mono); font-size: 11px; letter-spacing: 0.16em;
             text-transform: uppercase; color: var(--ig-commons); }

/* ── components ───────────────────────────────────────────── */
.ig-card { background: var(--ig-bone); border: 1px solid var(--ig-rule);
           border-radius: var(--ig-radius); padding: 24px 26px; }

.ig-byline { font-family: var(--ig-sans); font-size: 13px; color: var(--ig-reed-deep); }
.ig-byline b { color: var(--ig-delta); font-weight: 600; }

.ig-response { border-left: 2px solid var(--ig-meridian); padding-left: 20px;
               background: transparent; }

.ig-citation { font-family: var(--ig-mono); font-size: 12.5px; line-height: 1.75;
               background: var(--ig-vellum); border-radius: var(--ig-radius);
               padding: 18px 20px; color: var(--ig-delta); }

.ig-figcap { font-family: var(--ig-sans); font-size: 12.5px; color: var(--ig-reed-deep);
             line-height: 1.55; border-top: 1px solid var(--ig-rule);
             padding-top: 10px; margin-top: 14px; }

.ig-note { border-top: 1px solid var(--ig-rule-heavy);
           border-bottom: 1px solid var(--ig-rule-heavy);
           padding: 18px 0; font-size: var(--ig-step-1); }

.ig-inverted { background: var(--ig-deep); color: var(--ig-parchment); }
.ig-inverted a, .ig-inverted .ig-kicker { color: var(--ig-meridian); }
.ig-inverted .ig-label { color: rgba(251, 250, 246, 0.55); }