/*
 * Portfolio Design Tokens
 * Source of truth for every color, spacing, and type value on the site.
 * Never write a raw hex/px value in a page or component — reference a token.
 * Mirrors the Pulse Design System's token architecture: primitives → semantic aliases.
 * A third "mapped" tier (component-scoped tokens like --button-bg) can be added
 * as real components get built — add it there, not as one-off inline values.
 *
 * Generated from the Figma file's Variables (Color Primitives, Color, Spacing
 * Primitives, Spacing collections) — values pulled directly from the Plugin API,
 * not eyeballed from a screenshot.
 *
 * 2026 homepage direction: cosmos / greenwhite / smaltblue / elm are the active
 * primitives for the homepage (see --bg-hero, --text-hero-* below). brown / orange
 * / sage / forest remain in place because --bg-inverse, --bg-section-alt, and
 * --text-muted (used on case study pages / ProjectRow hover) haven't been
 * migrated to the new palette yet — don't delete them until those are addressed.
 *
 * v2 — restored --layout-max-width and --space-160 (--padding-hero-y), both
 * dropped by mistake in v1's wholesale file replacement rather than a deliberate
 * change. --text-accent was NOT restored — --text-hero-eyebrow is its intended
 * successor, scoped to the not-yet-built .hero-panel structure. Migrate
 * .hero__eyebrow to .type-hero-eyebrow when the hero panel gets built; don't
 * bring --text-accent back.
 */

:root {

  /* ============================================================
   * PRIMITIVES — raw values, tied to no meaning. Never reference
   * these directly in components; go through the semantic layer below.
   * ============================================================ */

  /* --- Color primitives: brown (legacy — still backs --bg-inverse/text-muted paths) --- */
  --color-brown-0: #f3b29b;
  --color-brown-0-5: #e4a38d;
  --color-brown-1: #d5957e;
  --color-brown-1-5: #c58670;
  --color-brown-2: #b67861;
  --color-brown-3: #985a45;
  --color-brown-4: #793d28;
  --color-brown-5: #5b200b;
  --color-brown-6: #491a09;
  --color-brown-7: #371307;
  --color-brown-8: #240d04;
  --color-brown-8-5: #1b0a03;
  --color-brown-9: #120602;
  --color-brown-9-5: #090301;
  --color-brown-10: #000000;

  /* --- Color primitives: orange (legacy — still backs --bg-inverse) --- */
  --color-orange-0: #ffffff;
  --color-orange-0-5: #fdeee7;
  --color-orange-1: #fcdccf;
  --color-orange-1-5: #facbb7;
  --color-orange-2: #f8ba9f;
  --color-orange-3: #f59770;
  --color-orange-4: #f17540;
  --color-orange-5: #ee5210;
  --color-orange-6: #be420d;
  --color-orange-7: #8f310a;
  --color-orange-8: #5f2106;
  --color-orange-8-5: #471905;
  --color-orange-9: #301003;
  --color-orange-9-5: #180802;
  --color-orange-10: #000000;

  /* --- Color primitives: sage (legacy — still backs --bg-section-alt/--text-muted) --- */
  --color-sage-0: #ffffff;
  --color-sage-0-5: #fbfbfb;
  --color-sage-1: #f6f8f6;
  --color-sage-1-5: #f2f4f2;
  --color-sage-2: #edf1ed;
  --color-sage-3: #e4e9e5;
  --color-sage-4: #dbe2dc;
  --color-sage-5: #d2dbd3;
  --color-sage-6: #b4beb5;
  --color-sage-7: #96a197;
  --color-sage-8: #778479;
  --color-sage-8-5: #68766a;
  --color-sage-9: #59675b;
  --color-sage-9-5: #4a594c;
  --color-sage-10: #3b4a3d;

  /* --- Color primitives: forest (legacy) --- */
  --color-forest-0: #b7d8bc;
  --color-forest-0-5: #a8c9ad;
  --color-forest-1: #9aba9f;
  --color-forest-1-5: #8bab90;
  --color-forest-2: #7c9c81;
  --color-forest-3: #5f7f64;
  --color-forest-4: #416146;
  --color-forest-5: #244329;
  --color-forest-6: #1d3621;
  --color-forest-7: #162819;
  --color-forest-8: #0e1b10;
  --color-forest-8-5: #0b140c;
  --color-forest-9: #070d08;
  --color-forest-9-5: #040704;
  --color-forest-10: #000000;

  /* --- Color primitives: cosmos (active — 2026 homepage accent family) --- */
  --color-cosmos-0: #fff2f1;
  --color-cosmos-0-5: #fdf0f0;
  --color-cosmos-1: #fbeeee;
  --color-cosmos-1-5: #f9edec;
  --color-cosmos-2: #f7ebea;
  --color-cosmos-2-5: #f3e9e8; /* NEW — requested directly by hex for the
   * Pre-Infusion Assessment Flow homepage thumbnail's placeholder tray.
   * Sits between cosmos-2 and cosmos-3 on the existing scale rather than
   * reusing either neighbor, since it doesn't exactly match either one. */
  --color-cosmos-3: #f5e5e5;
  --color-cosmos-4: #f7dddc;
  --color-cosmos-5: #fecfcd;
  --color-cosmos-6: #fc7973;
  --color-cosmos-7: #fa2219;
  --color-cosmos-8: #b40b04;
  --color-cosmos-8-5: #870803;
  --color-cosmos-9: #5a0502;
  --color-cosmos-9-5: #2d0301;
  --color-cosmos-10: #000000;

  /* --- Color primitives: greenwhite (active — 2026 homepage neutral family) --- */
  --color-greenwhite-0: #f8f8f6;
  --color-greenwhite-0-5: #f5f6f4;
  --color-greenwhite-1: #f3f4f1;
  --color-greenwhite-1-5: #f1f2ef;
  --color-greenwhite-2: #eff0ed;
  --color-greenwhite-3: #ebece9;
  --color-greenwhite-4: #e7e8e3;
  --color-greenwhite-5: #e4e6dd;
  --color-greenwhite-6: #bbc0a9;
  --color-greenwhite-7: #919a75;
  --color-greenwhite-8: #62684c;
  --color-greenwhite-8-5: #494e39;
  --color-greenwhite-9: #313426;
  --color-greenwhite-9-5: #181a13;
  --color-greenwhite-10: #000000;

  /* --- Color primitives: smaltblue (active — 2026 homepage, border/interactive only so far) --- */
  --color-smaltblue-0: #cee2e0;
  --color-smaltblue-0-5: #c4d7d6;
  --color-smaltblue-1: #bacdcb;
  --color-smaltblue-1-5: #afc2c1;
  --color-smaltblue-2: #a5b8b6;
  --color-smaltblue-3: #8ea6a4;
  --color-smaltblue-4: #719996;
  --color-smaltblue-5: #548d88;
  --color-smaltblue-6: #43716d;
  --color-smaltblue-7: #325552;
  --color-smaltblue-8: #223836;
  --color-smaltblue-8-5: #192a29;
  --color-smaltblue-9: #111c1b;
  --color-smaltblue-9-5: #080e0e;
  --color-smaltblue-10: #000000;

  /* --- Color primitives: elm (active — 2026 homepage, hero surface + body ink) --- */
  --color-elm-0: #b4dbea;
  --color-elm-0-5: #a8cedd;
  --color-elm-1: #9cc2d1;
  --color-elm-1-5: #8fb5c3;
  --color-elm-2: #83a8b7;
  --color-elm-3: #6292a5;
  --color-elm-4: #437b91;
  --color-elm-5: #23657f;
  --color-elm-6: #1c5166;
  --color-elm-7: #153d4c;
  --color-elm-8: #0e2833;
  --color-elm-8-5: #0a1e26;
  --color-elm-9: #071419;
  --color-elm-9-5: #030a0d;
  --color-elm-10: #000000;

  /* --- Color primitives: white (case-study surface fill — not part of any
   * family scale, an unbound literal white in Figma, not a variable) --- */
  --color-white: #ffffff;

  /* --- Illustrative color: OnePulse Connect's own pulse-teal-700, used only
   * in the Token Architecture live embed to demonstrate that primitive,
   * semantic alias, and mapped token all resolve to the same value. This is
   * data being illustrated (the case study subject's palette), not a
   * portfolio design token — kept separate from the primitive families
   * above. Confirmed exact via the real Figma node (353:108, Token Example
   * swatch fill) — the earlier #2c6164 pixel-sampled from
   * images/ds_figmavariables.png was a different, unrelated screenshot;
   * no discrepancy remains. */
  --color-pulse-teal-700: #0c6265;
  --color-teal-label: #006566; /* NEW — Token Architecture live-embed card label text (PRIMITIVE/SEMANTIC ALIAS/MAPPED TOKEN), confirmed against Figma node 353:108. Unbound literal in Figma (not aliased to any variable there), same as --color-pulse-teal-700 above. */

  /* --- Illustrative alias/mapped steps for the same live embed — chained via
   * var() to --color-pulse-teal-700 above rather than repeating its hex, so
   * the three Token Architecture cards reference three distinct custom
   * properties instead of one value copy-pasted three times. Same
   * illustrative status as --color-pulse-teal-700: this is OnePulse
   * Connect's palette being demonstrated, not a portfolio design token, so
   * neither is used anywhere else on the site.
   * primary.main (#14A3A8) confirmed distinct via Figma variable lookup —
   * the chain intentionally resolves through primary.dark instead. */
  --pulse-primary-dark: var(--color-pulse-teal-700);
  --pulse-accent-primary-fg-fill: var(--pulse-primary-dark);

  /* --- Layout primitives --- */
  --layout-max-width: 1200px;

  /* --- Radius primitives --- */
  --radius-full: 99px; /* pill/fully-rounded — safely larger than half the height of anything it's applied to */
  --radius-sm: var(--space-4); /* NEW — Problem Diagram resolved-side image frame corners, confirmed against Figma */
  --radius-md: var(--space-8); /* case-study row image corners, confirmed against Figma */
  --radius-lg: var(--space-16); /* NEW — homepage hero card + glow corners, confirmed against Figma node 378:160 (381:486/381:487) */

  /* --- Spacing primitives --- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px; /* restored — dropped by mistake in v6, still in live use via --gap-hero-text */
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px; /* superseded — was the About page's card/bio column gap
   * for one revision of node 496:156; the next revision moved that gap to
   * 80px (see --space-80 below). Kept, same as --space-128/--font-size-64,
   * in case a future section lands on this rung again. */
  --space-80: 80px; /* NEW — About page's card/bio column gap, now 80px per
   * the latest revision of node 496:156/517:67 (was 64px, see --space-64
   * above). 80px already exists as a literal value on --hero-section-padding-y
   * below, but that token is named and scoped for the homepage hero
   * section's padding role, not a general gap value; reusing it here would
   * be the same kind of name/role mismatch flagged for --border-muted in
   * the first About audit, so this gets its own general-scale primitive
   * instead, consistent with how --space-64 was added last round rather
   * than reused from elsewhere. */
  --space-96: 96px;
  --space-128: 128px; /* superseded — kept in case another section needs it */
  --space-160: 160px;
  --space-180: 180px; /* hero panel padding, current — confirmed against live Figma (196:383). Third revision to this value; see chat history if it changes again. */
  --space-200: 200px; /* superseded — kept in case another section needs it */

  /* --- Typography primitives --- */
  --font-family-serif: 'EB Garamond', serif; /* changed again from Cormorant Infant. Cascades to every composite class below. */
  --font-family-mono: 'Spline Sans Mono', monospace;
  --font-family-sans: 'Barlow', sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-11: 11px;
  --font-size-12: 12px; /* NEW — Token Architecture live-embed card label/name text, confirmed against Figma node 353:108 */
  --font-size-13: 13px;
  --font-size-14: 14px; /* NEW — homepage nav wordmark ("Welcome"), confirmed against Figma node 378:160 */
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-40: 40px; /* hero headline, current — confirmed against live Figma (196:383) */
  --font-size-48: 48px; /* added for case study page titles */
  --font-size-64: 64px; /* superseded — .type-hero-heading moved from Barlow/64px back to Playfair/40px. Kept in case a future treatment needs it again. */
  --font-size-72: 72px; /* unused — kept from an earlier hero iteration in case another hero-scale treatment needs it */

  --line-height-16: 16px;
  --line-height-18: 18px; /* "Selected Work" label, current — confirmed against live Figma (196:383) */
  --line-height-20: 20px;
  --line-height-24: 24px;
  --line-height-32: 32px;
  --line-height-36: 36px;
  --line-height-48: 48px;
  --line-height-56: 56px; /* added for case study page titles */
  --line-height-76: 76px; /* added for the 2026 homepage hero headline */

  --letter-spacing-none: 0px;
  --letter-spacing-tight-sm: -0.8px;
  --letter-spacing-tight-xs2: -1px; /* case study titles (.project-row__title), confirmed against live Figma — sits between tight-sm (-0.8) and tight-md (-1.2). Named awkwardly (xs2) to avoid conflicting with the existing tight/wide naming scale, which isn't strictly ordered (see tight-lg/-xl below) — consider a full naming pass on this scale at some point. */
  --letter-spacing-tight-md: -1.2px;
  --letter-spacing-tight-lg: -1.6px; /* added for case study page titles */
  --letter-spacing-tight-xl: -1.5px; /* superseded — .type-hero-heading moved to --letter-spacing-tight-xs2 (-1px), confirmed against Figma node 378:160. Kept in case another treatment needs -1.5px again. */
  --letter-spacing-wide-sm: 0.88px;
  --letter-spacing-wide-md: 1.04px;
  --letter-spacing-wide-lg: 1.1px;
  --letter-spacing-wide-xl: 1.5px; /* added for the 2026 homepage hero eyebrow */


  /* ============================================================
   * SEMANTIC ALIASES — roles, composed from primitives. Components
   * reference these, not the raw primitive scale above.
   * ============================================================ */

  /* --- Color: backgrounds --- */
  --bg-page: var(--color-greenwhite-0);
  --bg-canvas: var(--color-greenwhite-1-5); /* corrected from greenwhite-0-5 (#f5f6f4) to greenwhite-1-5 (#f1f2ef) — confirmed against live Figma variables on node 44:2 ("The Problem" section fill), the token's first actual usage anywhere in the codebase */
  --bg-accent: var(--color-cosmos-4);
  --bg-accent-tint: var(--color-cosmos-1); /* NEW — featured At a Glance stat tile fill, confirmed against Figma (#FBEEEE) */
  --bg-inverse: var(--color-greenwhite-5); /* confirmed against Figma node 239:186 — the light-tint hover redesign. Was previously cosmos-9 (dark, node 232:21) — my own local copy of this file was never updated when that fix was given to Claude Code directly, which is likely why it regressed. */
  --bg-placeholder: var(--color-greenwhite-4);
  --bg-placeholder-fill: var(--color-greenwhite-1); /* NEW — inner tone for the two-tone case-study image placeholder */
  --bg-placeholder-warm: var(--color-cosmos-2-5); /* NEW — Pre-Infusion Assessment Flow's homepage thumbnail tray, requested as an alternate to the shared greenwhite --bg-placeholder */
  --bg-section-alt: var(--color-sage-5); /* NOT migrated — still legacy sage. Used on case study pages, which haven't been redesigned yet */
  --bg-hero: var(--color-elm-0); /* NEW — the 2026 homepage hero panel */
  --bg-surface: var(--color-white); /* NEW — card/tile fill that sits a shade brighter than bg-page, e.g. At a Glance stat tiles */
  --bg-backdrop: color-mix(in srgb, var(--color-elm-10) 80%, transparent); /* NEW — lightbox/modal backdrop, computed from the elm-10 black primitive via color-mix() instead of a hardcoded rgba() */

  /* --- Color: text --- */
  --text-primary: var(--color-cosmos-9-5);
  --text-secondary: var(--color-elm-9);
  --text-inverse: var(--color-cosmos-9);
  --text-muted: var(--color-greenwhite-8); /* Migrated off legacy sage-6 (#b4beb5,
   * 1.7:1 — failed WCAG AA). greenwhite-8 is the lightest step in the active
   * 2026 palette that still clears 4.5:1 against both bg-page and bg-canvas
   * (5.48:1 / 5.19:1). */
  --text-label: var(--color-elm-8);
  --text-hero-eyebrow: var(--color-cosmos-8-5); /* NEW — status unclear as of the latest hero revision, see chat note */
  --text-hero-heading: var(--color-cosmos-9-5); /* NEW */
  --text-hero-subhead: var(--color-greenwhite-8); /* NEW — the hero's second line ("I am a product designer..."), confirmed against live Figma (196:383) */
  --text-tag: var(--color-greenwhite-8);
  --text-link: var(--color-elm-5); /* NEW — About page's inline LinkedIn link, confirmed against Figma node 517:67 (#23657f). color-elm-5 already existed as a primitive but had no semantic role assigned yet. */

  /* --- Color: accent --- */
  --accent-primary: var(--color-cosmos-7);
  --accent-primary-dark: var(--color-cosmos-8); /* NEW — Token Architecture live-embed arrow icon fill, confirmed against Figma node 353:108's exported SVG asset (#b40b04) */

  /* --- Color: borders --- */
  --border-divider: var(--color-greenwhite-6);
  --border-muted: var(--color-greenwhite-7);
  --border-default: var(--color-elm-9-5);
  --border-accent: var(--color-cosmos-9); /* NEW — nav pill button outline */
  --border-interactive: var(--color-smaltblue-7); /* NEW — smaltblue's first assigned role */
  --border-highlight: var(--color-cosmos-6); /* NEW — nav pill active-tab underline. Stated by the user as #FC7973/cosmos-6; not confirmed via Figma, but cosmos-6 is a real existing primitive. */
  --border-highlight-teal: var(--color-pulse-teal-700); /* NEW — Token Architecture card hover border. Reuses the exact swatch color the widget already demonstrates (pulse-teal.700), kept separate from --border-highlight so this hover treatment doesn't move if the nav pill's underline color ever changes. */

  /* --- Spacing: gaps --- */
  --gap-tight: var(--space-4);
  --gap-inline: var(--space-8);
  --gap-hero-text: var(--space-12); /* restored — dropped by mistake in v6. Added by Claude Code during the hero panel build (Prompt 4), not present in any version I generated before that — I had no visibility into it until this was flagged. */
  --gap-stack: var(--space-16);
  --gap-section: var(--space-20); /* NEW — gap between index/heading/paragraphs within a numbered case-study section */
  --gap-card: var(--space-24);
  --gap-footer-links: var(--space-24); /* corrected from --space-32 (32px) — confirmed against live Figma node 48:15 (the shared Footer component, also used on the homepage). This changes the homepage footer's link spacing too, since it's the same shared component. */

  /* --- Spacing: padding --- */
  --padding-section-x: var(--space-48);
  --padding-card-y: var(--space-36);
  --padding-section-y: var(--space-96);
  --padding-image: var(--space-32);
  --padding-hero-y: var(--space-160); /* superseded — the full-bleed hero-panel this backed was replaced by the floating hero card (see --hero-section-padding-y below), confirmed against Figma node 378:160. Kept in case a future full-bleed hero treatment needs it again. */

  /* --- Spacing: mapped (component-scoped) — one-off positioning values that
   * belong to a single component's exact Figma geometry, not the general
   * spacing rhythm scale above. Per CLAUDE.md's third token tier. --- */
  --hero-section-padding-y: 80px; /* NEW — homepage hero section vertical padding, confirmed against Figma node 378:160 */
  --hero-card-offset-top: 15px; /* was 14px — verified against Figma node
   * 507:24 (fileKey Sv50ruZLmflO9t4vcN7wiH) on 2026-09-14. An earlier pass
   * without live Figma access read the frame's combined "19px/15px" offset
   * description as top/left in that order; live verification shows that
   * assumption had the axes backwards — 15px is top, 19px is left (see
   * --hero-card-offset-left below). */
  --hero-card-offset-left: 19px; /* was 17px — verified against Figma node
   * 507:24 on 2026-09-14; see --hero-card-offset-top above. */
  --hero-card-glow-offset-left: 3px; /* NEW — glow layer's absolute left offset within the wrapper (top offset is 0), confirmed against Figma node 381:486 */
  --about-card-offset-top: 14px; /* NEW — About page experience/education card's inset from its own glow layer, confirmed against Figma node 496:156 (496:275) */
  --about-card-offset-left: 17px; /* NEW — see --about-card-offset-top; same node, left axis */
  --about-card-glow-offset-left: 3px; /* NEW — About card's glow layer inset from the outer wrapper (top/bottom inset is 0), confirmed against Figma node 496:156 (496:171) */
  --project-row-image-width: 640px; /* NEW — was a hardcoded 500px; raised so
   * homepage thumbnails (e.g. OnePulse Connect's Colors & Typography swatch
   * grid) render large enough to actually read rather than a full screenshot
   * shrunk past legibility. Component-scoped one-off card geometry, not part
   * of the general spacing rhythm scale, same tier as the hero/about card
   * offsets above. The <720px breakpoint overrides this back to `none`
   * (stacked layout goes full-width regardless), so this only affects
   * desktop/tablet. */

  /* --- Shadows --- */
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.1), 0 15px 9px rgba(0, 0, 0, 0.05), 0 41px 11px rgba(0, 0, 0, 0.02); /* 3-layer approximation of Figma's 5-stacked-shadow card spec — reads the same visually. Applied via CSS instead of baked into image assets so it stays themeable and doesn't bleed into the source PNG/WebP crop. */
  --shadow-thumbnail: 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 5px rgba(0, 0, 0, 0.05), 0 14px 5px rgba(0, 0, 0, 0.02); /* NEW — same 3-layer approximation approach as --shadow-card, scaled down for smaller inline thumbnails (e.g. the Problem Diagram's ds_colors image), confirmed against a distinct, tighter 5-layer spec on node 45:2 */
  --shadow-resolved: 0 4px 16px rgba(0, 0, 0, 0.12); /* NEW — single-layer spec, meaningfully simpler than the 3-layer --shadow-card/--shadow-thumbnail approximations. Problem Diagram's resolved/"Token System" side only, confirmed against Figma. */
}


/* ============================================================
 * TYPOGRAPHY — COMPOSITE TOKENS
 * fontSize/lineHeight/fontWeight can't be expressed as a single CSS
 * custom property (same limitation the Pulse tokens.css documented
 * for its 30 skipped composite tokens) — compose the primitives above
 * into a class per role instead. These classes ARE the type-scale
 * tokens; treat them as the source of truth the same way you'd treat
 * a custom property.
 * ============================================================ */

.type-wordmark {
  /* Updated — font-size 18→14px, line-height 20→16px, confirmed against
   * Figma node 378:160 (nav redesign). Family/weight/letter-spacing unchanged. */
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-14);
  line-height: var(--line-height-16);
  letter-spacing: var(--letter-spacing-none);
}

.type-nav-label {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-11);
  line-height: var(--line-height-16);
  letter-spacing: var(--letter-spacing-wide-lg);
  text-transform: none; /* was uppercase — all-caps mono labels flagged as
   * an unexamined-default tell (frontend-design audit). Scoped exclusively
   * to mono-font elements sitewide, confirmed before removing — see the
   * audit round this was fixed in for the full instance-by-instance check.
   * Live text here ("Work") is already Title Case in source, so this is
   * a real visible change, not just removing a no-op. */
}

.type-eyebrow {
  /* Unused anywhere in the current HTML — confirmed via grep across all
   * pages/components. Fixed for consistency with the other mono classes
   * rather than left uppercase, in case this gets picked up later. */
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-16);
  line-height: var(--line-height-20);
  letter-spacing: var(--letter-spacing-wide-md);
  text-transform: none;
}
.type-eyebrow strong,
.type-eyebrow .emphasis {
  font-weight: var(--font-weight-semibold);
}

.type-hero-eyebrow {
  /* NEW — 2026 homepage hero. Same family as .type-eyebrow, larger and
   * wider-tracked. Also unused anywhere in the current HTML — same
   * for-consistency fix as .type-eyebrow above. */
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-18);
  line-height: var(--line-height-20);
  letter-spacing: var(--letter-spacing-wide-xl);
  text-transform: none;
}
.type-hero-eyebrow strong,
.type-hero-eyebrow .emphasis {
  font-weight: var(--font-weight-semibold);
}

.type-hero-heading {
  /* Updated — line-height 56→48px, letter-spacing -1.5px→-1px (now
   * --letter-spacing-tight-xs2, an exact reuse), confirmed against Figma
   * node 378:160 (hero card redesign, node 381:488). Font-family/weight/
   * size unchanged (serif regular 40px). This is at least the third
   * revision to this class; the hero treatment has iterated repeatedly —
   * verify against Figma before trusting this file if it's been a while. */
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-40);
  line-height: var(--line-height-48);
  letter-spacing: var(--letter-spacing-tight-xs2);
}

.type-hero-subhead {
  /* NEW — the hero's second line. Playfair Display Regular, confirmed
   * against live Figma (196:383). Color comes from --text-hero-subhead,
   * not --text-hero-eyebrow — this is a distinct role. */
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-20);
  line-height: var(--line-height-32); /* was line-height-24 (1.2x) — fine
   * for the single nowrap line this role held until the 2026 hero rewrite;
   * now genuinely multi-line, and 1.2x read as tight-leading (Impeccable
   * flagged it). 32px/20px = 1.6x, matching frontend-design's guidance to
   * give serif text slightly more leading than the sans-serif body's 1.5x
   * (--line-height-24 on .type-body, 16px). Reused an existing token
   * rather than adding a new one. */
  letter-spacing: var(--letter-spacing-none);
}

.type-tagline {
  /* Corrected — was 24px/36px, Figma's Title Block description (44:5) is
   * now 20px with line-height: normal (a deliberate "auto" choice, not a
   * fixed value). Only used here, so updated directly rather than adding
   * an override. */
  font-family: var(--font-family-serif);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-20);
  line-height: normal;
  letter-spacing: var(--letter-spacing-none);
}

.type-section-label {
  /* Updated — font-size 24→16, line-height 32→18, confirmed against live
   * Figma (196:383) on the "Selected Work" text, which is bound to
   * text/primary there. letter-spacing (tight-sm, -0.8px) was already
   * correct and is unchanged. If this class is used anywhere besides
   * "Selected Work", confirm before applying — see prompt. */
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-16);
  line-height: var(--line-height-18);
  letter-spacing: var(--letter-spacing-tight-sm);
}

.type-meta {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-13);
  line-height: var(--line-height-20);
  letter-spacing: var(--letter-spacing-wide-md);
  text-transform: none; /* was uppercase — see .type-nav-label above for
   * the audit this was fixed in. Most live text using this class is
   * already hardcoded caps in the HTML itself (section index numbers
   * aside, which have no case) — this CSS change alone won't visibly
   * affect those instances; only genuinely mixed-case content (like
   * the copyright line) changes appearance. .case-title-block__context
   * and .stat-tile__label both already set text-transform: none
   * downstream to counter this rule — now redundant, left in place,
   * not cleaned up as part of this fix. */
}

.type-case-title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-32);
  line-height: var(--line-height-48);
  letter-spacing: var(--letter-spacing-tight-md);
}

.type-label-secondary {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-11);
  line-height: var(--line-height-16);
  letter-spacing: var(--letter-spacing-wide-sm);
  text-transform: none; /* was uppercase — see .type-nav-label above for
   * the audit this was fixed in. Most live text using this class is
   * already hardcoded caps in the HTML (CASE STUDY, FILE A/B/C, WORK) —
   * this alone won't visibly change those; badge/project-row__index
   * text (Title Case/numbers in source) is the visible change here.
   * .problem-diagram__caption already sets text-transform: none
   * downstream to counter this rule — now redundant, left in place. */
}

.type-token-name {
  /* NEW — Token Architecture live-embed card label/name text, confirmed
   * against Figma node 353:108. Medium weight (not regular), 12px (no
   * existing class matched), line-height "normal" is a deliberate Figma
   * choice (leading-[normal], not a fixed px value) so it's left as the
   * literal CSS keyword rather than forced onto the line-height scale. */
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-12);
  line-height: normal;
  letter-spacing: var(--letter-spacing-wide-sm);
  text-transform: none; /* was uppercase — see .type-nav-label above for
   * the audit this was fixed in. All live text here ("Primitive",
   * "Pulse-teal.700", etc.) is Title/mixed case in source, so this is a
   * real visible change on every instance, not a no-op. */
}

.type-description {
  font-family: var(--font-family-serif);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-20);
  line-height: var(--line-height-32); /* was line-height-24 (1.2x) — same
   * tight-leading bug as .type-hero-subhead, same fix: 32px/20px = 1.6x.
   * Unlike the hero card, .project-row__description has no fixed-height
   * container (flex, align-items: start) — confirmed no re-measurement
   * needed here. */
  letter-spacing: var(--letter-spacing-none);
}

/* --- Case study page additions (introduced while building the Pulse
 * case study page; not present on the homepage) --- */

.type-page-title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-48);
  line-height: var(--line-height-56);
  letter-spacing: var(--letter-spacing-tight-lg);
}

.type-section-heading {
  /* NEW — numbered case-study section headings ("01 The Problem"), confirmed
   * against Figma. Distinct from .type-section-label (16px, "Selected Work"
   * on the homepage) despite the similar name — different scale, different role. */
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-24);
  line-height: var(--line-height-32);
  letter-spacing: var(--letter-spacing-tight-sm);
}

.type-body {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  letter-spacing: var(--letter-spacing-none);
}
.type-body strong,
.type-body .lead-in {
  font-weight: var(--font-weight-semibold);
}

/* --- About page additions (introduced while building the About page,
 * confirmed against Figma node 496:156) --- */

.type-about-heading {
  /* "Experience:" / "Education:" card headings. */
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-18);
  line-height: var(--line-height-24);
  letter-spacing: var(--letter-spacing-none);
}

.type-about-entry {
  /* Role/org line per experience & education entry. Role name is Medium
   * weight, org name Regular — same in-line emphasis pattern as
   * .type-eyebrow/.type-body (bold via a nested element, not a second
   * class), here on <strong> for the role name. */
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-14);
  line-height: var(--line-height-24);
  letter-spacing: var(--letter-spacing-none);
}
.type-about-entry strong {
  font-weight: var(--font-weight-medium);
}

.type-about-entry-years {
  /* Mono year/range under each entry. Figma specs this at 10px, but that's
   * under the site's 11px functional-text floor (flagged by the impeccable
   * design-quality hook) — bumped to 11px, matching the floor every other
   * mono label on the site already sits on. No letter-spacing in the Figma
   * export (unlike the wide-tracked mono labels elsewhere) — left at
   * none rather than assumed. */
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-11);
  line-height: var(--line-height-24);
  letter-spacing: var(--letter-spacing-none);
}

.type-about-bio-lead {
  /* Bio's opening sentence — semibold italic, per Figma. Was 24px; latest
   * Figma revision of node 496:156 specifies 20px for both bio roles
   * (lead and body), no longer a larger size on the lead alone. */
  font-family: var(--font-family-serif);
  font-style: italic;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-20);
  line-height: normal; /* Figma leading-[normal], same deliberate "auto"
   * choice as .type-tagline/.type-token-name — not forced onto the
   * line-height scale. */
  letter-spacing: var(--letter-spacing-none);
}

.type-about-bio-body {
  /* Was 24px — see .type-about-bio-lead above, same revision. */
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-20);
  line-height: normal;
  letter-spacing: var(--letter-spacing-none);
}


/* ============================================================
 * COMPONENT INTENT (not yet built) — documented here so it isn't
 * lost before the ProjectRow component exists in code.
 * ============================================================ */

/*
.project-row:hover {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}
*/

/*
 * Hero panel (2026 homepage) — not yet built in code. Reference:
 * Figma node 196:382 ("Combo — Portica / Bossanova", now on the
 * cosmos/greenwhite/smaltblue/elm palette).
 *
 * .hero-panel {
 *   background: var(--bg-hero);
 *   padding: var(--padding-hero-y) var(--padding-section-x);
 * }
 * .hero-panel__eyebrow  { color: var(--text-hero-eyebrow); }
 * .hero-panel__heading  { color: var(--text-hero-heading); }
 * .nav-button {
 *   background: var(--bg-accent);
 *   color: var(--text-inverse);
 *   border: 1px solid var(--border-accent);
 * }
 */