/* Design-system base and text roles, shared by every page on the system
   (D25). Load order: css/tokens.css, this file, then the page stylesheet.
   Moved here from css/work-gemstones.css on 2026-10-21 without changes. */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-switzer);
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }

/* ---------- type ---------- */
/* Text roles, chosen by the job the text does (D34). One class per Figma
   text style: text/heading/l = .heading-l, text/label/default = .label
   ("/default" dropped). Each class takes its whole style from one
   --type-<role> token (css/tokens.css), so the size follows the mode.
   Readability values (D10 addendum): display 1.1 (headings) / 1.15
   (statement), body 1.5, captions 1.35, legend 12px; Figma's styles match. */
/* heading-l: the page title, one per page; also the headline stat numbers */
.heading-l { font: var(--type-heading-l); color: var(--text-secondary); margin: 0; }
/* Screen-reader-only text: in the accessibility tree, not on screen. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* @raw-ok idiom: the standard visually-hidden pattern */ overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* One focus indicator for every control on the page (a11y A1, I14).
   Neutral passes 3:1 on every backdrop it can sit on: surface 14.2:1,
   accent 4.45:1. Section blocks receive focus only programmatically (ToC
   jumps), so they don't draw a ring around the whole section. */
:focus-visible { outline: var(--border-2) solid var(--focus-ring); outline-offset: var(--focus-offset); }
/* heading-m: a section heading */
.heading-m { font: var(--type-heading-m); color: var(--text-secondary); margin: 0; }
/* statement: a highlighted statement (takeaway, pull-quote, callout headline); always accent */
.statement { font: var(--type-statement); color: var(--text-accent); margin: 0; }
/* body-l: a paragraph that leads a block */
.body-l { font: var(--type-body-l); margin: 0; }
/* body-m: running text */
.body-m { font: var(--type-body-m); margin: 0; }
/* body-s: small text (the hint bar, result lines, compact stat labels) */
.body-s { font: var(--type-body-s); margin: 0; }
/* body-intro: a case study's opening summary, under the title */
.body-intro { font: var(--type-body-intro); margin: 0; }
/* body-detail: short text under a label (a value, a description, a result) */
.body-detail { font: var(--type-body-detail); margin: 0; }
/* caption-strong: an uppercase label that names a value: metadata (ROLE, PLATFORM), pills, NEXT CASE STUDY */
.caption-strong { font: var(--type-caption-strong); text-transform: uppercase; margin: 0; }
/* caption: uppercase data text (chart names and counts, the compact ToC title) */
.caption { font: var(--type-caption); text-transform: uppercase; margin: 0; }
/* caption-heading: an uppercase label that heads the block below it (SOLUTION A, ROUND 1); regular at ≥1280, semibold below */
.caption-heading { font: var(--type-caption-heading); text-transform: uppercase; margin: 0; }
/* caption-legend: the legend under a chart or figure */
.caption-legend { font: var(--type-caption-legend); letter-spacing: 0; color: var(--text-secondary); margin: 0; }
/* label-strong: a label you act on (buttons, navigation, the clock; any new chip or button text); in the ToC it marks the current section, resting items use label */
.label-strong { font: var(--type-label-strong); margin: 0; }
/* label: a label that names something (ToC section labels at rest, the text beside logos) */
.label { font: var(--type-label); margin: 0; }

/* Action chip (Foundations 1328:8963): copy (button) or link (anchor), same surface and size. Moved here from css/home.css so the case studies
   Back chip can use it (the Résumé, LinkedIn and copy chips on the home page are the same component). */
.action-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-tight); /* Figma 1328:8962: 8, was 12 */
  height: 36px; /* @raw-ok measure: one-off, the action chip's height (Figma 1328:8962) */
  padding: var(--inset-tight) var(--inset-compact);
  border: 0; border-radius: var(--radius-compact);
  background: var(--surface-shade); color: var(--text-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
@media (hover: hover) { .action-chip:hover { background: var(--surface-tint); } } /* State=Hover 1360:9311; pointer devices only, so a tap never leaves it behind */
/* Touch size (Figma Action chip, Size=Touch): 44px high, no fill and no hover fill; the phone top bar's chips (Ioli, 2026-10-27) */
@media (max-width: 780px) {
  .action-chip--touch, .action-chip--touch:hover { height: var(--size-touch); background: none; -webkit-tap-highlight-color: transparent; }
  /* No fill to change, so pressing dims the chip for a moment instead (Ioli, 2026-10-27) */
  .action-chip--touch { transition: opacity var(--duration-200) var(--ease-fast-out-slow-in); }
  .action-chip--touch:active { opacity: var(--opacity-60); }
}
@media (max-width: 780px) and (prefers-reduced-motion: reduce) { .action-chip--touch { transition: none; } }
.action-chip__icon { width: var(--size-icon-20); height: var(--size-icon-20); display: block; flex-shrink: 0; }