/* ==========================================================================
   Bridle2Fit · tokens
   Letterlijk uit THEMA-OVERDRACHT.md, hoofdstuk 3. Namen uit tokens.json.
   Daaronder de afgeleide tokens die per breakpoint wisselen (hoofdstuk 3a.1).
   ========================================================================== */

:root{
  /* donker */
  --b2f-night:#17161B;      /* hero en volle donkere banden */
  --b2f-graphite:#26252A;   /* donkere sectie met tekst erin */
  --b2f-panel:#2F2E33;      /* kaart binnen een donkere sectie */
  --b2f-charcoal:#3C3B3F;   /* bodytekst op licht */
  --b2f-slate:#4E4E53;      /* alleen header en hoofdmenu */
  --b2f-line-dark:#5A595E;  /* hairline op donker */

  /* licht */
  --b2f-warm-white:#F9F5F2; /* paginagrond */
  --b2f-paper:#FFFFFF;      /* kaart die moet oplichten */
  --b2f-stone:#EFEAE5;      /* tegel onder een productfoto */
  --b2f-pattern:#F1EDE6;    /* grond onder het lijnpatroon */
  --b2f-line:#DDD5CF;       /* hairline op licht */
  --b2f-greige:#B2A8A3;     /* scheiding, decoratief */

  /* tekst */
  --b2f-muted:#5C5B60;      /* secundair op licht, 6.1:1 */
  --b2f-muted-dark:#CFC8C3; /* secundair op donker, 5.0:1 */

  /* goud */
  --b2f-gold:#C9B965;       /* knop en accent op donker, 5.6:1 */
  --b2f-gold-deep:#7A6A2E;  /* label, lijn en hover op licht */

  /* leer */
  --b2f-leather-black:#1A1917;
  --b2f-leather-havanna:#4B2E22;
  --b2f-leather-nut:#5C261D;
  --b2f-leather-red:#6A2A20;

  /* ruimte */
  --b2f-space-1:4px;  --b2f-space-2:8px;  --b2f-space-3:14px; --b2f-space-4:20px;
  --b2f-space-5:32px; --b2f-space-6:48px; --b2f-space-7:96px; --b2f-space-8:112px;

  /* hoeken */
  --b2f-radius:0;        /* standaard: alles vierkant */
  --b2f-radius-badge:8px;
  --b2f-radius-tile:14px;  /* categorietegels op de homepage (brand identity) */
  --b2f-radius-label:12px; /* het label op die tegels */
  --b2f-radius-round:999px;

  /* letter */
  --b2f-font:'Nunito Sans','Helvetica Neue',Arial,sans-serif;

  /* meldingen en toestanden (van het bord Toestanden) */
  --b2f-error:#8A2423;        /* fouttekst en randen */
  --b2f-error-bg:#FBEDEC;     /* grond onder een foutmelding */
  --b2f-warn:#8A6D16;         /* let-op-tekst */
  --b2f-warn-line:#C9A227;    /* streep links van een let-op-blok */
  --b2f-warn-bg:#FBF4E6;      /* grond onder een let-op-blok */
  --b2f-ok:#27632A;           /* op voorraad, gelukt */
  --b2f-neutral:#8E8A86;      /* uitgeschakeld, niet van toepassing */
  --b2f-neutral-bg:#F3F1EF;   /* grond onder een neutrale voorraadregel (bord Toestanden) */

  /* ---- Afgeleid door het thema, niet uit tokens.json ---- */

  /* Focusring: diep goud op licht. Donkere vlakken zetten hem op goud (zie .b2f-dark). */
  --b2f-focus:var(--b2f-gold-deep);

  /* Beweging, hoofdstuk 4.1 en 9. */
  --b2f-ease:ease;
  --b2f-dur:.3s;
  --b2f-dur-photo:.7s;

  /* Lay-out, hoofdstuk 3a.1. Mobile first: dit is de basis onder 768 px. */
  --b2f-max:1440px;
  --b2f-gutter:20px;
  --b2f-section-y:28px;
  --b2f-header-h:60px;     /* de plakkende kopbalk, zonder utilitybalk */
  --b2f-utility-h:38px;    /* scrolt weg, alleen vanaf tablet */

  /* Typografie die per breakpoint wisselt, tabel in hoofdstuk 3. */
  --b2f-fs-hero-home:40px;
  --b2f-fs-hero-page:32px;
  --b2f-fs-display:30px;   /* h2 homepage */
  --b2f-fs-section:25px;   /* h2 binnenpagina */
  --b2f-fs-card:19px;
  --b2f-fs-lead:16px;
  --b2f-fs-body:15.5px;
  --b2f-fs-small:13px;
  --b2f-fs-label:10.5px;
  --b2f-ls-label:.22em;
  --b2f-fs-button:12px;
  --b2f-fs-wordmark:11.5px;
}

/* tablet */
@media (min-width:768px){
  :root{
    --b2f-gutter:32px;
    --b2f-section-y:48px;
    --b2f-fs-hero-home:56px;
    --b2f-fs-hero-page:38px;
    --b2f-fs-display:36px;
    --b2f-fs-section:28px;
    --b2f-fs-card:20px;
    --b2f-fs-lead:17px;
    --b2f-fs-body:16px;
    --b2f-fs-small:13.5px;
    --b2f-fs-label:11.5px;
    --b2f-ls-label:.24em;
    --b2f-fs-button:13px;
    --b2f-fs-wordmark:13px;
  }
}

/* desktop */
@media (min-width:1100px){
  :root{
    --b2f-gutter:48px;
    --b2f-section-y:72px;
    --b2f-header-h:84px;
    --b2f-fs-hero-home:72px;
    --b2f-fs-hero-page:46px;
    --b2f-fs-display:44px;
    --b2f-fs-section:32px;
    --b2f-fs-card:22px;
    --b2f-fs-lead:18px;
    --b2f-fs-body:16.5px;
    --b2f-fs-button:13.5px;
    --b2f-fs-wordmark:15px;
  }
}

/* Donkere vlakken: focusring in goud, want diep goud is op donker onleesbaar. */
.b2f-dark{
  --b2f-focus:var(--b2f-gold);
  background:var(--b2f-graphite);
  color:var(--b2f-warm-white);
}
.b2f-dark--night{background:var(--b2f-night)}