/* =====================================================================
   Whitepaper / Long-form UI kit — reading layer over Nectar tokens.
   ADDITIVE: do not promote into the org design system without review.
   Pairs Source Serif 4 (reading body) with Inter (UI chrome) +
   JetBrains Mono (data). Dark default; [data-theme="light"] override.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&display=swap");

:root {
  /* Reading-layer aliases (resolve onto Nectar tokens, themed below) */
  --wp-font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --wp-font-ui: var(--font-sans);
  --wp-font-mono: var(--font-mono);

  /* Long-form reading measure & rhythm */
  --wp-measure: 41rem;          /* ~68-72ch at body size */
  --wp-measure-wide: 72rem;     /* figure / full-bleed */
  --wp-rail: 15rem;             /* margin call-out rail */
  --wp-gutter: 3rem;

  /* Reading type scale (rem-based, fluid) */
  --wp-body: clamp(1.1875rem, 0.45vw + 1.07rem, 1.34rem);
  --wp-lead: clamp(1.35rem, 0.7vw + 1.18rem, 1.6rem);
  --wp-h2: clamp(1.85rem, 1.6vw + 1.4rem, 2.7rem);
  --wp-h3: clamp(1.25rem, 0.7vw + 1.05rem, 1.5rem);
  --wp-display: clamp(2.6rem, 4.4vw + 1.4rem, 5rem);
  --wp-leading: 1.72;
}

/* ---------- Theme: dark (default) ---------- */
:root,
[data-theme="dark"] {
  --wp-page: #0b0f15;          /* slightly deeper than --bg for reading */
  --wp-page-2: #0f141c;
  --wp-surface: #131a23;
  --wp-surface-2: #1a222d;
  --wp-ink: #e9eef4;           /* body text — softened white */
  --wp-ink-strong: #f6f9fc;
  --wp-ink-2: #aab4c0;         /* secondary */
  --wp-ink-3: #6b7682;         /* muted, captions */
  --wp-rule: rgba(255,255,255,0.09);
  --wp-rule-2: rgba(255,255,255,0.14);
  --wp-accent: #3fb950;        /* emerald primary */
  --wp-accent-soft: #56d364;
  --wp-accent-bg: rgba(63,185,80,0.10);
  --wp-mark-glow: rgba(63,185,80,0.16);
  --wp-selection: rgba(63,185,80,0.28);
}

/* ---------- Theme: light ---------- */
[data-theme="light"] {
  --wp-page: #fbfcfd;
  --wp-page-2: #f4f6f8;
  --wp-surface: #ffffff;
  --wp-surface-2: #f6f8fa;
  --wp-ink: #1c2530;
  --wp-ink-strong: #0c1117;
  --wp-ink-2: #4a5663;
  --wp-ink-3: #8a96a3;
  --wp-rule: rgba(13,17,23,0.10);
  --wp-rule-2: rgba(13,17,23,0.16);
  --wp-accent: #1f9a4b;
  --wp-accent-soft: #18843f;
  --wp-accent-bg: rgba(31,154,75,0.08);
  --wp-mark-glow: rgba(31,154,75,0.12);
  --wp-selection: rgba(31,154,75,0.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--wp-page); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--wp-page);
  color: var(--wp-ink);
  font-family: var(--wp-font-body);
  font-size: var(--wp-body);
  line-height: var(--wp-leading);
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--wp-selection); color: var(--wp-ink-strong); }

/* ---------- UI chrome uses Inter; reading uses serif ---------- */
.ui { font-family: var(--wp-font-ui); }
.mono { font-family: var(--wp-font-mono); font-feature-settings: "tnum" 1; }

.eyebrow {
  font-family: var(--wp-font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp-ink-3);
}

/* =====================================================================
   Article column system
   ===================================================================== */
.wp-article {
  --col: var(--wp-measure);
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--wp-gutter), 1fr)
    [wide-start] minmax(0, calc((var(--wp-measure-wide) - var(--wp-measure)) / 2))
    [text-start] min(var(--wp-measure), 100% - 2 * var(--wp-gutter)) [text-end]
    minmax(0, calc((var(--wp-measure-wide) - var(--wp-measure)) / 2)) [wide-end]
    minmax(var(--wp-gutter), 1fr) [full-end];
}
.wp-article > * { grid-column: text; }
.wp-article > .wp-wide { grid-column: wide; }
.wp-article > .wp-full { grid-column: full; }

/* Reading blocks */
.wp-p {
  margin: 0 0 1.35em;
  color: var(--wp-ink);
  max-width: 100%;
  text-wrap: pretty;
}
.wp-p.lead {
  font-size: var(--wp-lead);
  line-height: 1.5;
  color: var(--wp-ink-strong);
  margin-bottom: 1.6em;
}
.wp-p a, .wp-inline-link {
  color: var(--wp-accent-soft);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--wp-accent-soft) 45%, transparent);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wp-p a:hover, .wp-inline-link:hover { border-bottom-color: var(--wp-accent-soft); }

.wp-h2 {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-h2);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--wp-ink-strong);
  margin: 0 0 0.5em;
}
.wp-h3 {
  font-family: var(--wp-font-ui);
  font-size: var(--wp-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--wp-ink-strong);
  margin: 2.2em 0 0.6em;
}

.wp-section { padding: 3.2rem 0 0; scroll-margin-top: 5.5rem; }
.wp-section + .wp-section { padding-top: 1.4rem; }

/* Section number + title header */
.wp-section-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; }
.wp-section-num {
  font-family: var(--wp-font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--wp-accent);
  letter-spacing: 0.02em;
  padding-top: 0.35em;
  flex: none;
}

/* Pull-quote */
.wp-pullquote {
  font-family: var(--wp-font-body);
  font-size: clamp(1.5rem, 1.4vw + 1.2rem, 2rem);
  line-height: 1.32;
  font-weight: 500;
  color: var(--wp-ink-strong);
  margin: 1.8rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--wp-accent);
  text-wrap: balance;
}
.wp-pullquote .cite {
  display: block;
  font-family: var(--wp-font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--wp-ink-3);
  margin-top: 0.8rem;
}

/* Callout box (evidence / definition) */
.wp-callout {
  font-family: var(--wp-font-ui);
  background: var(--wp-surface);
  border: 1px solid var(--wp-rule);
  border-left: 3px solid var(--wp-accent);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem;
  margin: 1.8rem 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--wp-ink-2);
}
.wp-callout .wp-callout-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp-accent-soft);
  margin-bottom: 0.5rem;
}
.wp-callout strong { color: var(--wp-ink-strong); font-weight: 600; }

/* Lists */
.wp-list { margin: 0 0 1.35em; padding-left: 1.3em; }
.wp-list li { margin-bottom: 0.55em; padding-left: 0.3em; }
.wp-list li::marker { color: var(--wp-accent); }

/* Figure caption */
.wp-caption {
  font-family: var(--wp-font-ui);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--wp-ink-3);
  margin-top: 0.9rem;
  text-wrap: pretty;
}
.wp-caption .mono { color: var(--wp-ink-2); }

/* Inline data chip */
.wp-chip {
  font-family: var(--wp-font-mono);
  font-size: 0.86em;
  font-weight: 500;
  background: var(--wp-accent-bg);
  color: var(--wp-accent-soft);
  border: 1px solid color-mix(in oklab, var(--wp-accent) 30%, transparent);
  padding: 0.05em 0.4em;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

/* Focusable visible ring for a11y */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--wp-accent-soft);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Skip link */
.wp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  font-family: var(--wp-font-ui); font-size: 0.85rem; font-weight: 600;
  background: var(--wp-accent); color: #04130a;
  padding: 0.7rem 1.1rem; border-radius: 0 0 var(--radius-md) 0;
}
.wp-skip:focus { left: 0; }

@media (max-width: 720px) {
  :root { --wp-gutter: 1.35rem; }
  .wp-section-head { gap: 0.6rem; }
}