/**
 * Vloeren Kameraad — Design Tokens
 * Alle CSS custom properties afgeleid van de React/Tailwind implementatie.
 * Gebruik: @import 'design-tokens.css'; in je WordPress theme style.css
 *
 * Design richting: "Premium Materiaal — Scandinavisch Vakmanschap"
 */

:root {
  /* ─────────────────────────────────────────────────────────────────────────
   * KLEURENPALET
   * Gebaseerd op oklch() waarden uit index.css en Tailwind config
   * ───────────────────────────────────────────────────────────────────────── */

  /* Primaire kleuren — exacte oklch (gelijk aan inline-waarden landingspagina's) */
  --color-charcoal:        oklch(0.12 0.005 65);   /* donker achtergrond */
  --color-charcoal-mid:    oklch(0.18 0.010 65);   /* kaarten op donker */
  --color-charcoal-light:  oklch(0.28 0.010 65);   /* borders op donker */

  /* Goud accent */
  --color-gold:            oklch(0.68 0.08 75);    /* primaire accent */
  --color-gold-dark:       oklch(0.55 0.08 75);    /* hover staat */
  --color-gold-light:      oklch(0.82 0.06 75);    /* lichte variant */

  /* Off-white / cream */
  --color-cream:           oklch(0.98 0.008 75);   /* lichte achtergrond */
  --color-cream-mid:       oklch(0.92 0.006 75);   /* borders op licht */
  --color-cream-dark:      oklch(0.85 0.008 75);   /* subtiele tekst op donker */

  /* Tekst */
  --color-text-primary:    oklch(0.12 0.005 65);   /* hoofdtekst */
  --color-text-secondary:  oklch(0.55 0.010 65);   /* subtekst */
  --color-text-muted:      oklch(0.60 0.015 65);   /* placeholder */
  --color-text-on-dark:    oklch(0.92 0.008 75);   /* tekst op donker */

  /* Functionele kleuren */
  --color-green:           oklch(0.55 0.15 145);   /* succes / actie */
  --color-green-dark:      oklch(0.35 0.15 145);   /* donkere variant */
  --color-blue:            oklch(0.50 0.12 220);   /* info */
  --color-blue-dark:       oklch(0.35 0.12 220);   /* donkere variant */
  --color-orange:          oklch(0.55 0.15 30);    /* waarschuwing */

  /* Wit */
  --color-white:           #ffffff;

  /* ─────────────────────────────────────────────────────────────────────────
   * TYPOGRAFIE
   * Lettertypen: Libre Baskerville (koppen) + Nunito (body)
   * ───────────────────────────────────────────────────────────────────────── */

  --font-display:   'Libre Baskerville', Georgia, serif;
  --font-body:      'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Groottes (mobile-first, rem) */
  --text-xs:        0.75rem;    /* 12px */
  --text-sm:        0.875rem;   /* 14px */
  --text-base:      1rem;       /* 16px */
  --text-lg:        1.125rem;   /* 18px */
  --text-xl:        1.25rem;    /* 20px */
  --text-2xl:       1.5rem;     /* 24px */
  --text-3xl:       1.875rem;   /* 30px */
  --text-4xl:       2.25rem;    /* 36px */
  --text-5xl:       3rem;       /* 48px */
  --text-6xl:       3.75rem;    /* 60px */

  /* Gewichten */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* Regelafstand */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* Letter-spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ─────────────────────────────────────────────────────────────────────────
   * SPACING
   * Gebaseerd op 4px grid (0.25rem = 4px)
   * ───────────────────────────────────────────────────────────────────────── */

  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ─────────────────────────────────────────────────────────────────────────
   * LAYOUT
   * ───────────────────────────────────────────────────────────────────────── */

  --container-max:    1280px;
  --container-pad:    1.5rem;    /* 24px horizontale padding */
  --container-pad-lg: 2rem;      /* 32px op desktop */

  /* ─────────────────────────────────────────────────────────────────────────
   * BORDERS & RADIUS
   * ───────────────────────────────────────────────────────────────────────── */

  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.25rem;   /* 20px */
  --radius-full: 9999px;    /* pill */

  --border-color:       var(--color-cream-mid);
  --border-color-dark:  var(--color-charcoal-light);

  /* ─────────────────────────────────────────────────────────────────────────
   * SHADOWS
   * ───────────────────────────────────────────────────────────────────────── */

  --shadow-sm:   0 1px 2px rgba(26, 26, 24, 0.05);
  --shadow-md:   0 4px 6px rgba(26, 26, 24, 0.07);
  --shadow-lg:   0 10px 15px rgba(26, 26, 24, 0.10);
  --shadow-xl:   0 20px 25px rgba(26, 26, 24, 0.12);
  --shadow-2xl:  0 25px 50px rgba(26, 26, 24, 0.20);

  /* ─────────────────────────────────────────────────────────────────────────
   * TRANSITIONS
   * ───────────────────────────────────────────────────────────────────────── */

  --transition-fast:    150ms ease;
  --transition-normal:  200ms ease;
  --transition-slow:    300ms ease;
  --transition-slower:  500ms ease;

  /* ─────────────────────────────────────────────────────────────────────────
   * BREAKPOINTS (voor gebruik in JS / media queries)
   * ───────────────────────────────────────────────────────────────────────── */
  /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1440px */

  /* ─────────────────────────────────────────────────────────────────────────
   * HEADER
   * ───────────────────────────────────────────────────────────────────────── */

  --header-height:          80px;
  --header-height-mobile:   64px;
  --topbar-height:          36px;   /* Announcement bar */
  --header-bg:              var(--color-white);
  --header-shadow:          0 2px 24px rgba(26, 26, 24, 0.10);
  --topbar-bg:              var(--color-charcoal);
  --topbar-text:            var(--color-cream-dark);

  /* ─────────────────────────────────────────────────────────────────────────
   * HERO SECTIES
   * ───────────────────────────────────────────────────────────────────────── */

  --hero-min-height:        580px;
  --hero-min-height-lg:     680px;
  --hero-overlay-start:     rgba(26, 26, 24, 0.97);
  --hero-overlay-mid:       rgba(26, 26, 24, 0.55);
  --hero-overlay-end:       rgba(26, 26, 24, 0.15);

  /* ─────────────────────────────────────────────────────────────────────────
   * STATS BAR
   * ───────────────────────────────────────────────────────────────────────── */

  --statsbar-bg:            var(--color-gold);
  --statsbar-text:          var(--color-charcoal);
  --statsbar-label:         rgba(26, 26, 24, 0.6);
  --statsbar-divider:       rgba(160, 130, 40, 0.5);

  /* ─────────────────────────────────────────────────────────────────────────
   * SECTIES
   * ───────────────────────────────────────────────────────────────────────── */

  --section-pad-y:          var(--space-24);   /* 96px */
  --section-pad-y-sm:       var(--space-16);   /* 64px */
  --section-bg-light:       var(--color-cream);
  --section-bg-white:       var(--color-white);
  --section-bg-dark:        var(--color-charcoal);

  /* ─────────────────────────────────────────────────────────────────────────
   * KAARTEN
   * ───────────────────────────────────────────────────────────────────────── */

  --card-bg:                var(--color-white);
  --card-border:            1px solid var(--color-cream-mid);
  --card-radius:            var(--radius-2xl);
  --card-shadow:            var(--shadow-sm);
  --card-shadow-hover:      var(--shadow-lg);
  --card-pad:               var(--space-6);

  /* ─────────────────────────────────────────────────────────────────────────
   * FORMULIEREN
   * ───────────────────────────────────────────────────────────────────────── */

  --input-height:           44px;
  --input-pad:              0.625rem 0.75rem;
  --input-border:           1px solid #d4cfc4;
  --input-border-focus:     1px solid var(--color-gold);
  --input-radius:           var(--radius-md);
  --input-bg:               var(--color-cream);
  --input-bg-focus:         var(--color-white);
  --input-text:             var(--color-text-primary);
  --input-placeholder:      var(--color-text-muted);
  --input-shadow-focus:     0 0 0 3px rgba(201, 168, 76, 0.15);

  /* ─────────────────────────────────────────────────────────────────────────
   * KNOPPEN
   * ───────────────────────────────────────────────────────────────────────── */

  --btn-pad:                0.75rem 1.5rem;
  --btn-pad-lg:             1rem 2rem;
  --btn-radius:             var(--radius-lg);
  --btn-font:               var(--font-body);
  --btn-weight:             var(--font-bold);
  --btn-transition:         var(--transition-normal);

  /* Primaire knop (groen) */
  --btn-primary-bg:         #3d8c5a;
  --btn-primary-text:       var(--color-white);
  --btn-primary-bg-hover:   #2a6040;

  /* Goud knop */
  --btn-gold-bg:            var(--color-gold);
  --btn-gold-text:          var(--color-charcoal);
  --btn-gold-bg-hover:      var(--color-gold-dark);

  /* Secundaire knop (outline) */
  --btn-secondary-border:   1px solid var(--color-charcoal-light);
  --btn-secondary-text:     var(--color-text-primary);
  --btn-secondary-bg-hover: var(--color-charcoal);
  --btn-secondary-text-hover: var(--color-white);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * DARK MODE OVERRIDES (optioneel — als WordPress theme dark mode ondersteunt)
 * ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Niet geïmplementeerd — site gebruikt bewust licht design */
}