/* tokens.css - starting-a-business-in-the-netherlands.com (NetherStart Partners). Source of truth for colour, type, space
 * and shape (DESIGN.md). Three layers: primitives (--p-*), semantic roles (--c-*, --f-*, --s-*), components (--btn-*,
 * --panel-*). Measured from the owner's design variant A (the owner's browser save of eternitylaw.com, harvested 2026-10-10):
 * deep indigo #272155 ground (oklch hue 284), white text and 1px white hairlines, cream #f9e5c5 as the warm muted text,
 * square corners everywhere. Faces: Bricolage Grotesque + Figtree (the owner's choice, 2026-10-10). oklch, hex in comments. */
:root {
  /* primitives */
  --p-indigo-950: oklch(19.5% 0.058 284);   /* #14112c  footer base, deepest ground */
  --p-indigo-900: oklch(23.8% 0.075 284);   /* #1c1841  title bands, table heads on light */
  --p-indigo-800: oklch(28.7% 0.091 284.3); /* #272155  the reference's ground */
  --p-indigo-700: oklch(34% 0.105 284);     /* #352d6e  raised panel, hover ground */
  --p-indigo-600: oklch(41% 0.14 284);      /* #463c95  links and buttons on light grounds */
  --p-indigo-300: oklch(76% 0.07 284);      /* #b3add8  focus ring on dark */
  --p-cream-200:  oklch(93% 0.047 79.6);    /* #f9e5c5  the reference's warm muted text; primary button on dark */
  --p-cream-300:  oklch(88% 0.065 78);      /* #ebd2a8  button hover */
  --p-cream-50:   oklch(97.6% 0.014 80);    /* #fcf6ec  cream band text block */
  --p-paper:      oklch(97.4% 0.006 284);   /* #f5f4f9  reading pages: alternate surface */
  --p-line-light: oklch(89.5% 0.016 284);   /* #dcd9e8  hairlines on light grounds */
  --p-text:       oklch(25.5% 0.04 284);    /* #221f39  body text on light */
  --p-muted:      oklch(47% 0.04 284);      /* #5a5577  secondary text on light */
  --p-white:      oklch(100% 0 0);

  /* semantic */
  --c-ground: var(--p-indigo-800);              /* every commercial page sits on indigo */
  --c-glass: oklch(28.7% 0.091 284.3 / 0.88);   /* the translucent panel over a fixed photograph */
  --c-glass-strong: oklch(23.8% 0.075 284 / 0.94);
  --c-on-dark: var(--p-white);
  --c-on-dark-soft: oklch(91% 0.02 284);        /* #e3e1f0  running text on indigo */
  --c-on-dark-muted: oklch(79% 0.035 284);      /* #bdb9d6  captions on indigo */
  --c-warm: var(--p-cream-200);                 /* kickers, numerals, labels on indigo */
  --c-line-dark: oklch(100% 0 0 / 0.72);        /* the reference's white hairline */
  --c-line-dark-soft: oklch(100% 0 0 / 0.22);   /* row rules inside a panel */
  --c-bg: var(--p-white);                       /* reading pages */
  --c-surface: var(--p-paper);
  --c-text: var(--p-text);
  --c-muted: var(--p-muted);
  --c-line: var(--p-line-light);
  --c-ink: var(--p-indigo-900);                 /* headings on light */
  --c-link: var(--p-indigo-600);
  --c-accent: var(--p-cream-200);               /* the primary action on indigo */
  --c-accent-ink: var(--p-indigo-900);          /* text on the cream button */
  --c-action: var(--p-indigo-800);              /* the primary action on light */
  --c-action-ink: var(--p-white);
  --c-focus: var(--p-indigo-300);
  --scrim-foot: linear-gradient(180deg, oklch(19.5% 0.058 284 / 0) 0%, oklch(19.5% 0.058 284 / 0.62) 62%, oklch(19.5% 0.058 284 / 0.86) 100%);
  --mist-top: linear-gradient(100deg, oklch(100% 0 0 / 0.9) 0%, oklch(100% 0 0 / 0.82) 36%, oklch(100% 0 0 / 0.35) 52%, oklch(100% 0 0 / 0) 66%);

  /* type */
  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --f-text: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --f-hero: clamp(2.4rem, 1.5rem + 3.1vw, 4.25rem);  /* 38-68, the reference's light hero H1 */
  --f-h1: clamp(2.2rem, 1.6rem + 2.3vw, 3.5rem);      /* 35-56 inner pages */
  --f-h2: clamp(1.85rem, 1.45rem + 1.6vw, 3rem);      /* 30-48, the reference's 48px section head */
  --f-h3: clamp(1.15rem, 1.08rem + 0.35vw, 1.375rem); /* 18-22 */
  --f-figure: clamp(2.4rem, 1.8rem + 2.4vw, 4rem);    /* hero and step numerals */
  --f-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);  /* 17-20 */
  --f-body: 1.0625rem;                                /* 17 */
  --f-small: 0.875rem;
  --f-label: 0.78rem;                                 /* uppercase labels */
  --w-display: 300; --w-display-strong: 480; --w-body: 400; --w-light: 300; --w-strong: 600; --w-ui: 500;
  --lh-tight: 1.06; --lh-head: 1.18; --lh-body: 1.62;
  --track-label: 0.14em;

  /* space and shape */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --wrap: 1296px; --wrap-text: 720px; --gutter: clamp(16px, 4vw, 48px);
  --r: 0px;                                   /* square, as the reference */
  --hair: 1px;

  /* components */
  --header-h: 80px;
  --btn-h: 50px; --btn-pad: 0 26px; --btn-font: 1rem;
  --panel-pad: clamp(24px, 4vw, 56px);
  --panel-gap: clamp(40px, 9vw, 140px);       /* how much photograph shows between two panels */
  --field-line: var(--hair) solid var(--c-line-dark);
  --ease: cubic-bezier(.22, .61, .36, 1);
}