/* Hallmark · macrostructure: shared-foundation · tone: premium-corporate · anchor hue: gold 84
 * HOFF merkfamilie - gedeeld design-fundament (Pad B: gedeeld systeem, eigen karakter)
 * Per site override je --color-accent* en --color-bg* via een eigen tokens-laag.
 * pre-emit critique: P5 H4 E5 S4 R5 V4
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600&family=Montserrat:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  /* ---- Typografie ---- */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: 'Montserrat', system-ui, sans-serif; /* quotes - zelfde font als hoff.legal */

  /* ---- Type-schaal (1.20 minor third) ---- */
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.18rem;
  --text-xl: 1.42rem;
  --text-2xl: 1.7rem;
  --text-3xl: 2.1rem;
  --text-4xl: 2.7rem;
  --text-display-s: clamp(2.4rem, 5vw, 3.6rem);
  --text-display: clamp(3rem, 8vw, 5.4rem);

  --leading-tight: 1.08;
  --leading-snug: 1.28;
  --leading-normal: 1.62;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* ---- Spatie-schaal (4pt) ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --space-4xl: 9rem;

  /* ---- Familie-neutralen (gedeeld) - goud/zwart, warm ---- */
  --color-ink: oklch(20% 0.008 70);            /* tekst op licht */
  --color-ink-soft: oklch(42% 0.008 70);
  --color-paper: oklch(98% 0.006 80);          /* warme lichte secties */
  --color-paper-2: oklch(95% 0.008 80);
  --color-line: oklch(88% 0.01 80);            /* hairline op licht */

  --color-bg: oklch(14% 0.005 255);            /* neutraal/koel zwart (≈ hoff.legal #0f1319) */
  --color-bg-2: oklch(19% 0.006 255);          /* verhoogd oppervlak (≈ #1f2124) */
  --color-bg-3: oklch(23% 0.007 255);          /* kaart op zwart */
  --color-text-on-dark: oklch(96% 0.004 255);
  --color-muted-on-dark: oklch(72% 0.01 255);
  --color-line-dark: oklch(30% 0.008 255);     /* hairline op donker */

  /* ---- Accent ---- familie = goud #c89752 ---- */
  --color-accent: #c89752;
  --color-accent-strong: #b07f3c;              /* donkerder, voor hover/randen */
  --color-accent-ink: #1c1405;                 /* tekst óp goud */
  --color-accent-wash: color-mix(in oklch, #c89752 22%, var(--color-bg)); /* subtiele goud-tint op zwart */

  /* ---- WhatsApp (merkkleur, vast) ---- */
  --color-wa: oklch(68% 0.16 150);
  --color-wa-strong: oklch(62% 0.17 150);

  /* ---- Focus ---- */
  --color-focus: oklch(80% 0.12 230);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Lijnen ---- */
  --rule-hair: 1px;

  /* ---- Beweging ---- */
  --dur-fast: 140ms;
  --dur-mid: 260ms;
  --dur-slow: 520ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 760px;
}