/* tokens.css - company-in-belgium.com. Source of truth for styling (DESIGN.md section 2).
   Three layers: primitive -> semantic -> component. The build copies this file to /css/tokens.css. */
:root {
  /* primitive */
  --navy-900: oklch(26.4% 0.06 255);   /* #0f2541 */
  --navy-700: oklch(34.5% 0.06 255);   /* #1d3657 */
  --navy-500: oklch(46% 0.05 255);
  --slate-700: oklch(36.5% 0.016 270); /* #3a3f4a */
  --slate-500: oklch(53.5% 0.02 270);  /* #6b7080 */
  --stone-100: oklch(95.7% 0.007 85);  /* #f3f1ec */
  --stone-200: oklch(92.5% 0.01 85);
  --line-200: oklch(87.6% 0.012 85);   /* #d9d5cc */
  --bronze-600: oklch(53.5% 0.07 70);  /* #8c6a3d */
  --bronze-700: oklch(46% 0.065 70);
  --bronze-300: oklch(74% 0.08 78);    /* #c8a66b */
  --white: oklch(100% 0 0);
  --danger: oklch(50% 0.17 27);
  --ok: oklch(48% 0.09 155);

  /* semantic */
  --ink: var(--navy-900);
  --ink-2: var(--slate-700);
  --muted: var(--slate-500);
  --ground: var(--white);
  --ground-alt: var(--stone-100);
  --ground-dark: var(--navy-900);
  --ground-band: var(--navy-700);
  --line: var(--line-200);
  --accent: var(--bronze-600);
  --accent-hover: var(--bronze-700);
  --accent-on-dark: var(--bronze-300);
  --on-dark: var(--white);
  --on-dark-2: oklch(86% 0.015 255);

  --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-body: "Mulish", "Helvetica Neue", Arial, system-ui, sans-serif;

  --fs-h1-home: clamp(2.5rem, 1.4rem + 3.6vw, 4rem);
  --fs-h1: clamp(2.25rem, 1.45rem + 2.6vw, 3.375rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 1.7vw, 2.625rem);
  --fs-h3: clamp(1.3125rem, 1.2rem + 0.35vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1.02rem + 0.15vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;
  --lh-body: 1.65;
  --track-label: 0.2em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-pad: clamp(64px, 40px + 4vw, 96px);
  --container: 1200px;
  --prose: 760px;
  --gutter: clamp(16px, 2vw + 8px, 32px);
  --radius: 0;
  --hairline: 1px solid var(--line);

  /* component */
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-fg: var(--white);
  --btn-h: 52px;
  --card-rule: 3px solid var(--ink);
  --rule-accent: 2px solid var(--accent);
  --focus: 0 0 0 3px var(--accent-on-dark);
  --header-h: 132px;
  --header-h-mobile: 72px;
}