/* =============================================================================
 * ABE Education — Design tokens
 *
 * Mirrors src/styles/global.css from aap-82/abe-site-2 (Tailwind 4 @theme block)
 * and the frontmatter of that repo's DESIGN.md.
 *
 * Read DESIGN.md / README.md for the full philosophy. The short version:
 *
 *   60% — Newsprint Cream-1/2/3 cool-slate neutrals (hue 240)
 *   30% — 5-tier Document Ink palette
 *    7% — Document Maroon (#800000) for action only
 *    3% — Regulator Blue (oklch hue 235) for verification only
 *
 * Sharp corners always. Flat by default. Two ornaments: 1px ink frame
 * and 1px dotted ink-3 rule.
 * ========================================================================== */

/* Self-hosted Archivo (variable font, supplied by brand).
   Public Sans + Source Serif 4 + Geist Mono are still loaded from
   Google Fonts pending licensed binaries from the brand owner. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400..900&family=Geist+Mono:wght@400..700&family=Public+Sans:wght@400..700&family=Source+Serif+4:wght@400..700&display=swap");

:root {
  /* ---- Neutrals (60%) — cool-slate Newsprint Cream, tinted hue 240 ------ */
  --bg:       oklch(98.2% 0.004 240); /* Newsprint Cream-1, page ground       */
  --bg-alt:   oklch(97.6% 0.005 240); /* Newsprint Cream-2, contained panels  */
  --bg-deep:  oklch(93.5% 0.008 240); /* Newsprint Cream-3, nested cards      */
  --rule:     oklch(85.0% 0.010 240); /* hairline divider                     */

  /* ---- Ink palette (30%) — primary type and dark plates ----------------- */
  --ink:      oklch(18% 0.020 240);   /* primary type, dark plate bg          */
  --ink-2:    oklch(35% 0.018 240);   /* secondary type, descriptions         */
  --ink-3:    oklch(50% 0.014 240);   /* tertiary, mono caps labels           */
  --ink-4:    oklch(62% 0.012 240);   /* quaternary, big numbers, disabled    */

  /* ---- Maroon — action register (7%) ----------------------------------- */
  --accent:        #800000;           /* Document Maroon                      */
  --accent-deep:   #500000;           /* Deep Burgundy — hover, per-card      */
  --accent-mid:    #600000;           /* Auxiliary — legacy compatibility     */
  --accent-wash:   oklch(95% 0.035 29);

  /* ---- Regulator Blue — verification register (3%) --------------------- */
  --info:          oklch(46% 0.16 235);
  --info-deep:     oklch(32% 0.12 235);
  --info-soft:     oklch(85% 0.06 235);
  --info-wash:     oklch(95% 0.025 235);
  --info-on-dark:  oklch(78% 0.08 235);

  /* ---- Semantic status register (status signals only) ------------------ */
  --success:       oklch(53% 0.13 150);
  --success-deep:  oklch(40% 0.10 150);
  --success-wash:  oklch(96% 0.022 150);

  --warning:       oklch(66% 0.14 74);
  --warning-deep:  oklch(47% 0.10 74);
  --warning-wash:  oklch(96% 0.035 74);

  --error:         oklch(54% 0.19 27);
  --error-deep:    oklch(42% 0.16 27);
  --error-wash:    oklch(96% 0.03 27);

  --premium:       oklch(50% 0.15 305);
  --premium-deep:  oklch(38% 0.13 305);
  --premium-wash:  oklch(96% 0.028 305);

  /* ---- Typography — 4 faces, one job each ------------------------------ */
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-prose:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Sharp corners — locked ------------------------------------------ */
  --radius-base: 0;

  /* ---- Spacing scale — 8px base ---------------------------------------- */
  --space-xs:    8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-xxl:  48px;
  --space-xxxl: 64px;
  --space-xxxxl: 96px;

  /* ---- Motion (structural only — no decorative animation) -------------- */
  --ease-q: cubic-bezier(0.2, 0, 0, 1);
  --dur-q:  180ms;
}

/* ============================================================================
 * Type roles — six roles across four faces. One class per role.
 * One face per voice (Voice-Per-Face Rule):
 *   Mono     = labels + display numerals
 *   Display  = Archivo titles (headline, title)
 *   Body     = Public Sans argument copy
 *   Prose    = Source Serif 4 longform editorial (answer capsules only)
 * ========================================================================== */

body, html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Display — big section number, Geist Mono 700, tabular figures.
   Always paired with a Title eyebrow + a Headline section H2. */
.t-display {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0;
  font-feature-settings: "lnum", "tnum";
}

/* Headline — Archivo 800 H2 (section title + streamcard title).
   UPPERCASE when nested in .sh__meta. */
.t-headline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Headline-Small — calmer H2, sentence case, snapped to Title tier. */
.t-headline-sm {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Title — Archivo 800 eyebrow ("Courses", "By state", "Why ABE").
   Always Document Maroon, always sentence case. */
.t-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--accent);
}

/* Body — Public Sans 400-500, the argument copy. */
.t-body {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
}

/* Body-Small — Public Sans 400, meta lines and dense fact rows.
   Sits between Label (11) and Body (18); ratio 1.29 to either side. */
.t-body-sm {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* Prose — Source Serif 4, editorial longform.
   Used ONLY inside answer capsules. Old-style figures. */
.t-prose {
  font-family: var(--font-prose);
  font-size: clamp(1.0625rem, 1.2vw, 1.125rem);
  font-weight: 500;
  line-height: 1.6;
  font-feature-settings: "onum", "kern", "liga";
}

/* Label — Geist Mono caps, the structural-label voice. */
.t-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Label-footnote — quieter caps, the verification register. */
.t-label-footnote {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================================
 * Dotted-underline link grammar (signature pattern).
 * Body-prose links and fact-value links.
 * Hover: text + underline shift to maroon-mid, pale maroon highlight sweeps in.
 * ========================================================================== */

.link-dotted {
  color: var(--ink-2);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink);
  text-underline-offset: 3px;
  background-image: linear-gradient(var(--accent-wash), var(--accent-wash));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition:
    color var(--dur-q) var(--ease-q),
    text-decoration-color var(--dur-q) var(--ease-q),
    background-size 340ms var(--ease-q);
}
.link-dotted:hover {
  /* !important so an inline `style="color: var(--ink-3)"` (commonly applied
     for a quieter rest tone) does not block the hover register. */
  color: var(--accent) !important;
  text-decoration-color: var(--accent) !important;
  background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .link-dotted {
    transition:
      color var(--dur-q) var(--ease-q),
      text-decoration-color var(--dur-q) var(--ease-q);
  }
}

/* ============================================================================
 * Common semantic element styles. Apply on a wrapped block to get document
 * defaults without per-element class plumbing.
 * ========================================================================== */

.doc h1, h1.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.doc h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.doc h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.doc p { font-family: var(--font-body); margin: 0 0 0.75rem; }

.doc strong { font-weight: 600; color: var(--ink); }

.doc hr {
  border: 0;
  border-top: 1px dotted var(--ink-3);
  margin: var(--space-lg) 0;
}

/* The 1px solid ink frame — one of two ornaments. */
.frame-ink { border: 1px solid var(--ink); }

/* The 1px dotted ink-3 rule — the other ornament. */
.rule-dotted { border-top: 1px dotted var(--ink-3); }

/* Focus ring — 2px solid ink, 3px offset, never blue or maroon. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}