/*
 * Grooming Guys — design tokens
 * Het enige :root-bestand van de site (masterbriefing §5). Iedere pagina linkt hiernaar.
 * Paletkleuren: White, Brown, Olive, Coal. De overige tokens zijn afgeleide tinten.
 */

:root {
  /* Palet */
  --white: #f4f4f4;
  --brown: #46413c;
  --olive: #8f9289;
  --coal: #242224;

  /* Afgeleide tinten */
  --paper: #ffffff;
  --line: #deddd9;
  --muted: #6d6965;
  --warm: #e8e3dc;
  --on-dark-muted: #aaa7a4;
  --on-dark-line: #494649;
  --coal-raised: #2c2a2c;

  /* Formulierfeedback */
  --error: #9b3a2f;
  --error-soft: rgba(155, 58, 47, .08);

  /* Typografie */
  --font-body: 'Inter', Arial, sans-serif;
  --font-display: 'Space Grotesk', Arial, sans-serif;

  /* Afronding */
  --radius-sm: 3px; /* knoppen, labels, kleine elementen */
  --radius-md: 6px; /* kaarten, fotovlakken, panelen */

  /* Spacing: vaste schaal (stap n = n × 4px). Gebruik voor padding, margin en gap altijd een van deze stappen. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Verticale ruimte van secties (masterbriefing §9.5); in WordPress de blokoptie compact / normaal / groot. */
  --section-compact: var(--space-16);
  --section-normal: var(--space-24);
  --section-large: var(--space-32);

  /* Layout */
  --max-width: 1240px;
  --gutter: 24px;
  --header-height: 78px;

  /* Schaduw */
  --shadow-float: 0 18px 40px rgba(36, 34, 36, .12);
}

@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --header-height: 68px;
    --section-compact: var(--space-12);
    --section-normal: var(--space-16);
    --section-large: var(--space-20);
  }
}