/* NĀRO merktokens. Dit is de enige plek met kleurwaarden.
   Bron: de interne NĀRO-merkspec, bijgewerkt op 15 september 2026: witte basis, Figtree, hairline-rails. */
:root {
  /* Kleur */
  --color-background: #FFFFFF;
  --color-sand: #F6F2EC;
  --color-surface: #FFFFFF;
  --color-ink: #0A0A0A;
  --color-accent: #0E7C66;
  --color-accent-hover: #0A5C4D;
  --color-muted: #5F6B66;
  --color-on-ink: #F3F1EC;
  --color-on-ink-muted: rgba(243, 241, 236, 0.72);
  --color-amber: #F3C593;
  --color-mint: #BFE0D4;
  --color-hairline: rgba(10, 10, 10, 0.08);
  --color-hairline-strong: rgba(10, 10, 10, 0.14);
  --color-hairline-bold: rgba(10, 10, 10, 0.3);
  --color-hairline-rows: rgba(10, 10, 10, 0.18);
  --color-hairline-on-ink: rgba(255, 255, 255, 0.28);
  --color-ghost-on-ink: rgba(255, 255, 255, 0.08);
  --color-nav: rgba(255, 255, 255, 0.92);
  --color-dot: rgba(10, 10, 10, 0.1);
  --color-panel-foot: #FBFAF7;
  --color-scene-word: #ECE8E0;
  /* Functionele kleuren: alleen in productbeelden, als tekst, rand of stip */
  --color-ok: #2E7D5B;
  --color-ok-line: rgba(46, 125, 91, 0.35);
  --color-warn: #B47A1E;
  --color-warn-line: rgba(180, 122, 30, 0.35);

  /* Gradient Ochtendlicht: productframes, CTA-kaarten, de rekenhulp en zwarte blokken */
  --gradient-ochtendlicht:
    radial-gradient(90% 80% at 0% 100%, var(--color-mint) 0%, rgba(191, 224, 212, 0) 60%),
    radial-gradient(80% 80% at 100% 85%, var(--color-amber) 0%, rgba(243, 197, 147, 0) 62%),
    linear-gradient(160deg, #F3EEE7 0%, #EEE4D5 100%);
  --gradient-ink-glow:
    radial-gradient(55% 80% at 0% 0%, rgba(14, 124, 102, 0.4) 0%, rgba(14, 124, 102, 0) 65%),
    radial-gradient(50% 80% at 100% 100%, rgba(232, 168, 98, 0.22) 0%, rgba(232, 168, 98, 0) 65%);
  /* Ochtendlicht als waas over een foto */
  --gradient-photo-wash:
    radial-gradient(70% 90% at 0% 100%, rgba(191, 224, 212, 0.55) 0%, rgba(191, 224, 212, 0) 60%),
    radial-gradient(60% 80% at 100% 90%, rgba(243, 197, 147, 0.5) 0%, rgba(243, 197, 147, 0) 62%);
  /* Donkere fotobanner met teal gloed */
  --gradient-banner:
    linear-gradient(90deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.78) 38%, rgba(10, 10, 10, 0.1) 75%),
    radial-gradient(55% 80% at 0% 0%, rgba(14, 124, 102, 0.45) 0%, rgba(14, 124, 102, 0) 65%);
  --gradient-banner-mobile: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.92) 55%);
  --mask-fade-bottom: linear-gradient(to bottom, #000000 72%, transparent);
  --pattern-dots: radial-gradient(rgba(10, 10, 10, 0.09) 1px, transparent 1px);
  --pattern-stripes: repeating-linear-gradient(135deg, #FFFFFF 0 6px, rgba(255, 255, 255, 0.55) 6px 9px);
  --icon-check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-check-on-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");

  /* Typografie */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --weight-display: 600;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: clamp(1.9rem, 3.6vw, 2.75rem);
  --text-display: clamp(2.3rem, 6.4vw, 4.75rem);
  --tracking-display: -0.045em;
  --tracking-heading: -0.03em;
  --tracking-label: 0.1em;
  --leading-display: 1.02;
  --leading-heading: 1.08;
  --leading-text: 1.6;

  /* Ruimte: stappen van 8px */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-12: 96px;

  /* Vorm en beweging */
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-frame: 16px;
  --duration: 350ms;
  --ease: ease-out;
  --content-width: 1120px;
}