/* =====================================================================
   Foundry @ UVA — Product Lab Design System
   Tokens extracted from the Jefferson Trust pre-read deck.

   This is a Jeffersonian academic-report system: a single serif family
   (Crimson Pro) carrying both display and body, paired with JetBrains
   Mono for chrome and meta. Paper-toned surfaces are dominant; navy
   and orange appear as accents and cards. Earlier decks in this system
   ran navy-dominant (Playfair + Lora) — that direction is preserved
   in `rotunda.html` but Product Lab is the canonical direction now.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----- Color: brand core ----- */
  --navy:        #232D4B;   /* UVA Jefferson navy — primary accent + dark surface */
  --navy-2:      #1B2438;   /* deeper navy step */
  --navy-3:      #2F3A5C;   /* navy step up (rare) */

  --orange:      #E57200;   /* UVA orange — emphasis, accent, pills */
  --orange-deep: #C05F00;   /* deep orange — small mono labels, low-contrast accents */
  --orange-2:    #F0A055;   /* light orange — chrome highlights, used sparingly */

  --paper:       #FBF7EE;   /* primary light surface — warmest */
  --cream:       #F4EFE6;   /* secondary light surface — slightly cooler */
  --cream-2:     #EBE3D2;   /* tertiary light surface — for cards on paper */

  --ink:         #1A1A1A;   /* primary text on light */
  --ink-soft:    #3A3A3A;   /* secondary text on light */
  --muted:       #6E6E6E;   /* tertiary text on light */

  /* ----- Status accents ----- */
  --status-complete: #2F7F3A;   /* green — "in production" / "complete" */
  --status-dev:      var(--orange);
  --status-future:   var(--ink-soft);

  /* ----- Rules / dividers ----- */
  --rule:           rgba(35, 45, 75, 0.18);   /* default rule on light */
  --rule-light:     rgba(35, 45, 75, 0.10);   /* low-emphasis rule on light */
  --rule-on-dark:   rgba(244, 239, 230, 0.22);

  /* ----- Semantic surface / text ----- */
  --bg-paper:       var(--paper);
  --bg-cream:       var(--cream);
  --bg-dark:        var(--navy);
  --fg-on-light:    var(--ink);
  --fg-on-dark:     var(--cream);
  --fg-muted-light: var(--ink-soft);
  --fg-muted-dark:  rgba(244, 239, 230, 0.85);
  --accent:         var(--orange);

  /* ----- Type families ----- */
  --font-serif:   "Crimson Pro", "Adobe Caslon Pro", "EB Garamond", Georgia, serif;
  --font-display: var(--font-serif);
  --font-body:    var(--font-serif);
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Type scale (slide-native, authored at 1920×1080) ----- */
  --fs-hero:      240px;   /* title-slide / section-break wordmark */
  --fs-display:   120px;   /* hero pull quote in card */
  --fs-h1:         96px;   /* section opener */
  --fs-h2:         88px;   /* slide title (headline) */
  --fs-h2-sm:      72px;   /* tight slide title */
  --fs-stat-xl:   220px;   /* hero numerals (single column) */
  --fs-stat-lg:   160px;   /* numerals in a 2-col layout */
  --fs-stat:       80px;   /* card numerals (e.g. roadmap "01") */
  --fs-stat-sm:    56px;   /* dense numerals (e.g. dollar ranges in cards) */
  --fs-subtitle:   36px;   /* slide subtitle (italic) */
  --fs-lede:       34px;   /* lede / first body */
  --fs-body:       30px;   /* default body */
  --fs-body-sm:    26px;   /* dense card body */
  --fs-small:      24px;   /* small body */
  --fs-card-h:     38px;   /* card heading (h3) */

  --fs-eyebrow:    24px;   /* uppercase eyebrow text in body */
  --fs-mono-lg:    24px;   /* slide-level mono label / chrome */
  --fs-mono:       18px;   /* small pill / inline mono */
  --fs-mono-sm:    16px;   /* footer counter / micro */

  /* ----- Letter spacing ----- */
  --tracking-mono-wide:   0.34em;   /* eyebrow, chrome, card label */
  --tracking-mono:        0.26em;   /* footer mono */
  --tracking-mono-tight:  0.20em;   /* pills, inline mono */
  --tracking-tight:      -0.025em;  /* hero serif numerals */
  --tracking-display:    -0.012em;  /* headline */

  /* ----- Layout (slide-native) ----- */
  --frame-inset-y:  70px;
  --frame-inset-x:  120px;
  --footer-bottom:  50px;

  /* ----- Borders / rules ----- */
  --rule-thin:    1px;
  --rule-thick:   2px;

  /* ----- Web-scale defaults (when re-using outside slides) ----- */
  --web-body:     18px;
  --web-h1:       56px;
  --web-h2:       40px;
}

/* =====================================================================
   Base elements — opinionated but easy to override.
   ===================================================================== */
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--web-body);
  line-height: 1.5;
  margin: 0;
  font-feature-settings: "lnum" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  letter-spacing: var(--tracking-display);
  margin: 0;
  font-weight: 500;
}
h1 { font-size: var(--web-h1); line-height: 0.98; }
h2 { font-size: var(--web-h2); line-height: 1.02; }
h3 { font-size: 28px; line-height: 1.15; }

/* Plain <em> inherits color (italic only). Orange italic is opt-in
   via the `.accent` class — see `.headline .accent` below. This mirrors
   product-lab.css and matches the canonical reference's two-tier
   emphasis treatment. */
em, h1 em, h2 em, h3 em,
.headline em, .headline i {
  font-style: italic;
  font-weight: 400;
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--orange);
}

a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--orange-deep); }

hr {
  border: 0;
  border-top: var(--rule-thin) solid var(--rule);
  width: 100%;
  margin: 24px 0;
}

/* =====================================================================
   Utility classes — match the conventions in the Product Lab deck.
   ===================================================================== */

/* Headline — confident serif with italic accent */
.headline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}
.headline .accent { color: var(--orange); font-style: italic; font-weight: 400; }

.subtitle {
  font-size: var(--fs-subtitle);
  line-height: 1.35;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 28px;
  max-width: 1400px;
}

/* Status pills */
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono-tight);
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid currentColor;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill.complete { color: var(--status-complete); border-color: var(--status-complete); }
.pill.dev      { color: var(--orange);          border-color: var(--orange); }
.pill.future   { color: var(--ink-soft);        border-color: var(--ink-soft); }

/* Hero stat numerals */
.stat {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-stat-xl);
  line-height: 0.92;
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
}
.stat em, .stat .dash { color: var(--orange); font-style: italic; font-weight: 500; }
.stat .small { font-size: 0.27em; vertical-align: super; letter-spacing: 0; }

/* Card label (the small mono ALL CAPS line that titles a card) */
.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-lg);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

/* Roman numeral lead-in (italic, orange) */
.roman {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--orange);
  margin-right: 14px;
}