/* Design tokens — DESIGN.md §4.7 (confirmed mockup values) + §5 typography, §6 grid.
   70% white/light neutral · 20% charcoal & steel · 10% accent.
   The accent stays the colour of actions and navigation — buttons, ordinary links, the
   jump rail — and, since the owner's instruction on the application page, a capability
   name used as a title, the reference form that carries the → marker, which warms to the
   capability signal under the pointer. --warm keeps the second and smaller signal for the
   same name read inside a sentence. */
:root{
  --charcoal:#1F2328; --charcoal-2:#252A30; --charcoal-3:#30353B;
  --ink:#3E444B; --muted:#6B727A;
  --steel:#8A9099; --steel-2:#A8AEB4;
  --line:#E2E5E7; --line-2:#D6DADD;
  --white:#FFFFFF; --off:#F7F7F5; --light:#F1F2F2;
  /* --accent-l is the accent that reads on charcoal (7.9:1), used where a linked
     capability title sits in a dark band. */
  --accent:#2C5B8D; --accent-d:#21446A; --accent-t:#E9EFF5; --accent-l:#8CBDE2;
  --label:#2A6FA8; --label-l:#8CBDE2;
  /* Capability names inside a sentence: warm brick red. #B23A25 is 6.0:1 on white and
     5.6:1 on --off, so a title in it stays readable where the gold attempts forced a
     compromise; --warm-d is the hover depth at 8.4:1, --warm-l the same signal on
     charcoal at 7.6:1. */
  --warm:#B23A25; --warm-d:#8E2A19; --warm-l:#E9A18F;
  --maxw:1320px; --pad:clamp(20px,5vw,48px);
  --r:4px; --r-btn:3px;
  --sans:Inter,"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  --display:"IBM Plex Sans",Inter,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}

/* Section rhythm and motion — DESIGN.md §6 (spacing) and §20 (restrained motion).
   Shared by every page: a page changes these once here, not per template. */
:root{
  --sect:clamp(56px,7vw,104px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-fast:.18s; --dur-mid:.6s; --dur-slow:1s;
  --shadow-1:0 14px 26px -22px rgba(31,35,40,.4);
  --hairline-dark:rgba(255,255,255,.16);
}