/* guidetobali.com — design tokens
   Layout en componenten volgen GetYourGuide. Kleuren zijn van ons. */

:root {
  /* --- kern --- */
  --ink: #0E0004;
  --canvas: #FFFFFF;
  --surface: #F6F4F3;
  --primary: #6B0F1A;
  --primary-hover: #520B14;
  --success: #004F2D;
  --wash: #7392B7;

  /* --- neutralen --- */
  --n-100: #FFFFFF;
  --n-200: #F6F4F3;
  --n-300: #E8E4E2;
  --n-400: #C9C3C0;
  --n-500: #8A8280;
  --n-600: #3D3836;

  /* --- afgeleid --- */
  --wash-bg: rgba(115, 146, 183, 0.10);
  --wash-border: rgba(115, 146, 183, 0.35);
  --primary-soft: rgba(107, 15, 26, 0.08);
  --success-soft: rgba(0, 79, 45, 0.10);

  /* --- typografie: sans zoals GYG, serif alleen als merkaccent --- */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-brand: 'Baskervville', Georgia, serif;

  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.0625rem;
  --step-2:  1.25rem;
  --step-3:  clamp(1.5rem, 1.35rem + 0.7vw, 1.85rem);
  --step-4:  clamp(1.85rem, 1.55rem + 1.4vw, 2.6rem);
  --step-5:  clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);

  /* --- ruimte --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- vorm --- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(14, 0, 4, .06), 0 1px 3px rgba(14, 0, 4, .04);
  --shadow-md: 0 4px 12px rgba(14, 0, 4, .10);
  --shadow-pop: 0 16px 48px rgba(14, 0, 4, .20);

  --wrap: 1240px;
  --header-h: 72px;
}

/* Contrast: --wash haalt 3.2:1 met wit, dus nooit knopkleur met witte tekst.
   --primary (9.4:1) en --success (9.7:1) zijn veilig. */