/* tokens.css - company-registration-netherlands.com. The source of truth for styling (DESIGN.md section 1).
   Colours are written in hex on purpose: the harvester behind design-distance.mjs reads rgb/hex only, and a palette
   authored in oklch() was measured as "accent null" on a sister site (DESIGN-REGISTRY, Belgium caveat). */
:root {
  /* primitives */
  --navy: #163257;          /* oklch(31.6% 0.075 256.2) */
  --navy-deep: #0f2547;
  --ink: #060813;
  --orange: #ff6e00;        /* oklch(70.6% 0.198 46.1), the reference's accent, unchanged */
  --orange-hover: #ff8a33;
  --orange-ink: #b84c00;    /* orange as text on white, 5.2:1 */
  --slate: #4a5566;         /* the finder's second button, white on it 7.5:1 */
  --white: #ffffff;
  --text: #222222;
  --muted: #5f6368;
  --surface: #f7f6f6;
  --line: #dfe1e0;
  --on-dark: #ffffff;
  --on-dark-muted: #c9d3e3;
  --ok: #1d6b3a;
  --danger: #b3261e;

  /* semantic */
  --ground: var(--white);
  --ground-alt: var(--surface);
  --ground-dark: var(--navy);
  --ground-deep: var(--navy-deep);
  --accent: var(--orange);
  --accent-hover: var(--orange-hover);
  --link: var(--navy);
  --btn-bg: var(--orange);
  --btn-bg-hover: var(--orange-hover);
  --btn-fg: var(--ink);       /* white on #ff6e00 is 2.8:1 and fails AA (DESIGN.md, D21 adapted) */
  --hairline: 1px solid var(--line);
  --rule-accent: 3px solid var(--orange);
  --focus: 0 0 0 3px var(--white), 0 0 0 5px var(--orange);
  --shadow: 0 24px 48px -24px rgb(6 8 19 / .45);
  --radius: 0;

  /* type */
  --font: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --fs-h1-home: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --fs-h1: clamp(2rem, 1.45rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.25rem);
  --fs-h3: 1.125rem;
  --fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --lh-body: 1.65;
  --fs-small: .9375rem;
  --fs-label: .8125rem;
  --fs-kicker: clamp(.875rem, .8rem + .3vw, 1.0625rem);
  --fs-figure: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  --track-caps: .08em;

  /* space and layout */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --section-pad: clamp(56px, 4rem + 2.5vw, 96px);
  --container: 1200px;
  --prose: 720px;
  --gutter: clamp(16px, 4vw, 32px);
  --util-h: 30px;
  --bar-h: 56px;
  --btn-h: 48px;
}