/* ==========================================================================
   Beckey's — Design Tokens
   Deze waarden komen 1-op-1 uit het Figma-bestand (PsNO3Qv09QgTV4hHJNHFXd).
   Verander een kleur/maat hier en het past zich overal op de site aan —
   dat is precies waarom we met tokens werken i.p.v. losse hex-codes.
   ========================================================================== */

:root {
  /* --- Kleur: pink-schaal (gesampled uit de echte menukaart-PDF) --- */
  --pink-50:  #fcecf2;
  --pink-100: #ffdbea;
  --pink-200: #fbbad4;
  --pink-300: #f9aecd;
  --pink-400: #f7a1c5;
  --pink-500: #f488b5;
  --pink-600: #ee5a97; /* = accent/primary */
  --pink-700: #b4426e;
  --pink-800: #792a4a; /* = footer / donkere vlakken */

  --neutral-white:    #ffffff;
  --neutral-ink:      #2a1420; /* = text/primary */
  --neutral-ink-soft: #6b4a58; /* = text/secondary */

  --green-600:      #3e7a4f; /* = status "nu open" */
  --terracotta-600: #ba6752; /* = status "gesloten" */

  /* --- Semantische aliassen (zo staan ze ook in Figma) --- */
  --color-bg-page:      var(--neutral-white);
  --color-bg-subtle:    var(--pink-50);
  --color-bg-soft:      var(--pink-100);
  --color-surface-card: var(--neutral-white);
  --color-surface-dark: var(--pink-800);

  --color-text-primary:   var(--neutral-ink);
  --color-text-secondary: var(--neutral-ink-soft);
  --color-text-on-dark:   var(--neutral-white);
  --color-text-on-accent: var(--neutral-white);
  --color-text-accent:    var(--pink-700);

  --color-accent-primary:         var(--pink-600);
  --color-accent-primary-hover:   var(--pink-700);
  --color-accent-primary-pressed: var(--pink-800);
  --color-accent-soft:            var(--pink-200);

  --color-border-default: var(--pink-200);
  --color-border-subtle:  var(--pink-100);

  --color-status-open:   var(--green-600);
  --color-status-closed: var(--terracotta-600);

  /* --- Spacing-schaal --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* --- Radius-schaal --- */
  --radius-sm:   8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-full: 999px;

  /* --- Typografie ---
     Domine  = koppen (Bold voor hero's, Regular voor sectietitels/kaarten)
     DM Sans = body, labels, knoppen
     Fraunces Black wordt NIET meer gebruikt voor koppen (bekende "j"-glyph-
     issue in dat gewicht); het logo-wordmark blijft tijdelijk Fraunces
     SemiBold als plaatsvervanger tot het echte logobeeld verwerkt is. */
  --font-display: 'Domine', 'Georgia', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-logo:    'Fraunces', 'Domine', serif; /* tijdelijk, i.a.w. echte logo-afbeelding */

  /* --- Schaduw --- */
  --shadow-card: 0 2px 8px rgba(42, 20, 32, 0.06), 0 8px 24px rgba(42, 20, 32, 0.06);

  /* --- Layout --- */
  --container-max: 1280px;
  --nav-height: 88px;
}