/* tokens.css - company-formation-in-netherlands.com (NetherForm Group). Source of truth for colour, type, space and
 * shape (DESIGN.md). Three layers: primitives (--p-*), semantic roles (--c-*, --f-*, --s-*), components (--btn-*,
 * --card-*). Measured from the owner's design variant A (rbswiss.com save, disign/), 2026-10-07: navy #041d57,
 * indigo #000660, blue #2370f6 (oklch hue 262), TildaSans, pill buttons. oklch with hex fallbacks in comments. */
:root {
  /* primitives */
  --p-navy-950: oklch(22.7% 0.136 264.1);   /* #000b5a  deep indigo, headings on light */
  --p-navy-900: oklch(25.8% 0.109 262.8);   /* #041d57  the reference's ground */
  --p-navy-800: oklch(31% 0.12 262);        /* #0b2a72  raised navy surface */
  --p-ink:      oklch(14% 0.05 262);        /* #020a1b  veil end, footer base */
  --p-blue-600: oklch(57% 0.22 262);        /* #2370f6  accent: buttons, focus */
  --p-blue-700: oklch(37.1% 0.179 263);     /* #03319c  links on light */
  --p-blue-100: oklch(95.5% 0.022 262);     /* #eaf0fd  icon discs, chips */
  --p-blue-50:  oklch(97.8% 0.01 262);      /* #f4f7fd  hero ground, alt sections */
  --p-grey-50:  oklch(98% 0 0);             /* #f9f9f9  the reference's light surface */
  --p-grey-200: oklch(91.5% 0.01 262);      /* #e1e6f0  hairlines */
  --p-grey-500: oklch(55% 0.02 262);        /* #6b7488  muted text */
  --p-text:     oklch(25% 0.04 262);        /* #1b2440  body text */
  --p-white:    oklch(100% 0 0);
  --p-green:    oklch(74% 0.18 150);        /* #27d061  the reference's check mark */

  /* semantic */
  --c-bg: var(--p-white);
  --c-surface: var(--p-blue-50);
  --c-surface-2: var(--p-grey-50);
  --c-ink: var(--p-navy-950);
  --c-text: var(--p-text);
  --c-muted: var(--p-grey-500);
  --c-line: var(--p-grey-200);
  --c-accent: var(--p-blue-600);
  --c-accent-ink: var(--p-white);
  --c-link: var(--p-blue-700);
  --c-dark: var(--p-navy-900);
  --c-dark-2: var(--p-navy-800);
  --c-on-dark: var(--p-white);
  --c-on-dark-muted: oklch(82% 0.04 262);   /* #b9c4e0 */
  --c-check: var(--p-green);
  --c-disc: var(--p-blue-100);
  --veil: linear-gradient(180deg, oklch(25.8% 0.109 262.8 / 0.15) 0%, oklch(25.8% 0.109 262.8 / 0.55) 55%, oklch(14% 0.05 262 / 0.88) 100%);

  --f-sans: "TildaSans", "Helvetica Neue", Arial, sans-serif;
  --f-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);     /* 36-56 */
  --f-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);     /* 28-40 */
  --f-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);      /* 19-24 */
  --f-lede: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);  /* 18-21 */
  --f-body: 1.0625rem;                                 /* 17 */
  --f-small: 0.875rem;
  --w-body: 360; --w-strong: 600; --w-head: 600; --w-ui: 500;
  --lh-tight: 1.12; --lh-head: 1.22; --lh-body: 1.62;

  --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: 104px;
  --wrap: 1200px; --wrap-narrow: 760px; --gutter: clamp(16px, 4vw, 32px);

  --r-pill: 999px; --r-card: 20px; --r-frame: 28px; --r-field: 12px; --r-small: 8px;
  --shadow-card: 0 1px 2px oklch(25% 0.05 262 / 0.06), 0 8px 24px oklch(25% 0.05 262 / 0.06);
  --shadow-lift: 0 18px 48px oklch(14% 0.05 262 / 0.22);

  /* components */
  --btn-h: 52px; --btn-pad: 0 28px; --btn-r: var(--r-pill); --btn-font: 1.0625rem;
  --card-pad: 28px; --card-r: var(--r-card);
  --disc: 72px;
  --ease: cubic-bezier(.2,.7,.2,1);
}