/* =========================================================
   Design tokens — kleuren, typografie, spacing, schaduwen
   ========================================================= */
:root {
  /* --- Kleuren: basis (warm, zacht, niet zuiver wit) --- */
  --color-bg: #f6f0e6;
  --color-bg-alt: #efe6d8;
  --color-surface: #fffcf6;
  --color-surface-soft: #f9f2e7;

  /* --- Inkt / tekst --- */
  --color-ink: #2c2620;
  --color-ink-soft: #5a5045;
  --color-ink-faint: #8a8072;

  /* --- Merkkleuren --- */
  --color-primary: #9c3b3b;        /* warme terracotta/bordeaux — uit de signatuur op de kaft */
  --color-primary-dark: #7c2c2c;
  --color-primary-light: #c66a5b;

  --color-secondary: #4f6a5c;      /* gedempt salie-groen — voor Het Tweede Gen / landelijk gevoel */
  --color-secondary-dark: #3a4f44;
  --color-secondary-light: #7c9a8a;

  --color-accent-gold: #c99a3b;    /* zacht goud accent */

  --color-border: #e2d5c0;
  --color-border-soft: #ece1cf;

  /* --- Status / overlay --- */
  --color-overlay: rgba(44, 38, 32, 0.55);

  /* --- Typografie --- */
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-h1: clamp(2.4rem, 4.5vw, 3.8rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.7rem);
  --fs-lead: clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* --- Spacing schaal --- */
  --space-2xs: 0.4rem;
  --space-xs: 0.8rem;
  --space-sm: 1.2rem;
  --space-md: 2rem;
  --space-lg: 3.2rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  /* --- Vormen & schaduwen --- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(44, 38, 32, 0.06);
  --shadow-md: 0 12px 30px rgba(44, 38, 32, 0.10);
  --shadow-lg: 0 24px 60px rgba(44, 38, 32, 0.16);

  /* --- Layout --- */
  --container-width: 1180px;
  --container-narrow: 820px;

  --transition-base: 220ms ease;
}