/* ============================================================================
   PickBoard · Design tokens
   De centrale laag voor kleur, typografie, ruimte en vorm.
   Pas hier iets aan en het werkt door op de hele site en de account pagina.
   8px grid uitgedrukt in rem, basis 16px (geen 62.5% truc).
   ========================================================================== */

:root {
  /* ---- Merk: gebroken wit & koel, gelijk aan The New Brand ------------ */
  --bg:            #f8f7f5;   /* gebroken wit, The New Brand achtergrond  */
  --bg-soft:       #f1efe9;   /* iets dieper, voor banden                 */
  --bg-tint:       #f6f1e2;   /* warme zandtint, voor afwisseling in ritme */
  --surface:       #ffffff;   /* cards                                    */
  --surface-2:     #faf9f7;   /* genest oppervlak                         */
  --border:        #e9e6e1;   /* subtiele rand                            */
  --border-strong: #d7d3cc;

  --ink:           #14131a;   /* koptekst, koel bijna zwart               */
  --ink-soft:      #3c3a48;   /* lopende tekst                            */
  --ink-muted:     #71707e;   /* bijschriften                             */
  --ink-faint:     #a1a1aa;

  /* ---- Blauw: indigo van The New Brand, primair merk-accent ---------- */
  --forest:        #4338ca;   /* diep indigo, voor banden en accentwoord  */
  --forest-deep:   #3730a3;
  --forest-ink:    #e0e7ff;   /* tekst op een indigo vlak                 */
  --emerald:       #4f46e5;   /* accent, knoppen (wit leesbaar)           */
  --emerald-bright:#6366f1;   /* helder accent, hover, positief           */
  --emerald-soft:  #eef2ff;   /* zachte vulling                           */
  --emerald-ring:  rgba(79, 70, 229, 0.38);

  /* ---- Geel: secundaire pop van The New Brand ------------------------ */
  --gold:          #facc15;
  --gold-soft:     #fef9c3;
  --gold-ink:      #713f12;   /* donkere tekst op geel                    */

  /* ---- Coral: alleen voor negatief / waarschuwing -------------------- */
  --coral:         oklch(0.64 0.17 25);
  --coral-soft:    oklch(0.95 0.035 25);

  /* ---- Donker dashboard (het product in het magazijn) ---------------- */
  --d-bg:          oklch(0.18 0.012 235);   /* bijna zwart, koel         */
  --d-bg-2:        oklch(0.205 0.013 235);
  --d-card:        oklch(0.235 0.014 235);
  --d-line:        oklch(1 0 0 / 0.08);
  --d-line-soft:   oklch(1 0 0 / 0.045);
  --d-text:        oklch(0.97 0.006 230);
  --d-muted:       oklch(0.68 0.012 230);
  --d-faint:       oklch(0.52 0.012 230);
  --d-emerald:     oklch(0.78 0.16 162);

  /* ---- Typografie ---------------------------------------------------- */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:  "Saira Condensed", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  --fs-micro:  0.75rem;    /* 12 */
  --fs-small:  0.875rem;   /* 14 */
  --fs-base:   1rem;       /* 16 */
  --fs-lead:   1.1875rem;  /* 19 */
  --fs-h4:     1.375rem;   /* 22 */
  --fs-h3:     1.75rem;    /* 28 */
  --fs-h2:     2.5rem;     /* 40 */
  --fs-h1:     clamp(2.6rem, 5.2vw, 4.25rem);
  --fs-display:clamp(3.4rem, 8vw, 6.5rem);

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-body:   1.6;

  /* ---- Ruimte (8px grid in rem) -------------------------------------- */
  --space-0_5: 0.25rem;  /* 4  */
  --space-1:   0.5rem;   /* 8  */
  --space-2:   1rem;     /* 16 */
  --space-3:   1.5rem;   /* 24 */
  --space-4:   2rem;     /* 32 */
  --space-5:   2.5rem;   /* 40 */
  --space-6:   3rem;     /* 48 */
  --space-8:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */
  --space-16:  8rem;     /* 128 */

  /* ---- Vorm ---------------------------------------------------------- */
  --radius-sm:   0.375rem;  /* 6  */
  --radius:      0.5rem;     /* 8  */
  --radius-lg:   0.75rem;    /* 12 */
  --radius-pill: 999px;

  --shadow-xs:  0 1px 2px oklch(0.24 0.02 160 / 0.05);
  --shadow-sm:  0 1px 2px oklch(0.24 0.02 160 / 0.06), 0 4px 10px -6px oklch(0.24 0.02 160 / 0.10);
  --shadow:     0 1px 2px oklch(0.24 0.02 160 / 0.05), 0 14px 34px -14px oklch(0.24 0.03 160 / 0.16);
  --shadow-lg:  0 2px 4px oklch(0.24 0.02 160 / 0.05), 0 40px 80px -32px oklch(0.2 0.04 165 / 0.30);

  --container: 75rem;   /* 1200 */
  --container-narrow: 48rem;

  /* ---- Beweging ------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* algemeen, ease-out      */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* entree, zacht uitlopend */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 150ms;  /* micro: knop, icoon        */
  --dur-2: 220ms;  /* hover, kaart              */
  --dur-3: 320ms;  /* paneel, accordion         */
}

/* ---- Reset / basis ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-snug);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.015em; }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* ---- Toegankelijke focus states -------------------------------------- */
:focus-visible {
  outline: 2.5px solid var(--emerald);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2.5px solid var(--emerald);
  outline-offset: 2px;
}

/* ---- Layout helpers --------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); }
.section { padding-block: var(--space-10); }
@media (max-width: 720px) { .section { padding-block: var(--space-8); } }

/* ---- Knoppen (padding op het 8/4px grid) ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: var(--fs-base); font-weight: 600; line-height: 1;
  padding: 0.75rem 1.5rem; border-radius: var(--radius);   /* 12 / 24 */
  border: 1px solid transparent; cursor: pointer;
  /* Hover schaalt subtiel op (3D, GPU), in plaats van onnatuurlijk omhoog. */
  transform: scale3d(1, 1, 1);
  will-change: transform;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: scale3d(1.04, 1.04, 1); }
.btn:active { transform: scale3d(0.98, 0.98, 1); }
.btn-primary {
  background: var(--emerald); color: #fff;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.25) inset, 0 8px 20px -8px var(--emerald-ring);
}
.btn-primary:hover { background: var(--emerald-bright); box-shadow: 0 1px 0 oklch(1 0 0 / 0.3) inset, 0 14px 28px -10px var(--emerald-ring); }
.btn-secondary {
  background: var(--surface); color: var(--ink);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--ink-muted); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: oklch(0.24 0.02 160 / 0.05); }
.btn-lg { padding: 0.875rem 1.5rem; font-size: var(--fs-base); }   /* 14 / 24, zelfde tekstgrootte, iets ruimer */