/* =====================================================
   OnsBord — Componenten
   Vereist tokens.css. Bevat geen enkele losse kleurwaarde:
   staat hier een hex, dan is dat een fout.

   Ontwerpregels die hier zijn vastgelegd (zie de stijlkaart in
   01_huisstijl/stijlkaart/OnsBord-Stijlkaart.html):
   - petrol is structuur én actie; er is geen aparte accentkleur
   - één duidelijke actie per taak, de rest secundair of ghost
   - radius 4px voor kaarten, 6px voor knoppen en invoer. Geen pill —
     dat is het paraplumerk Pro-Monty, niet OnsBord
   - geen uppercase op knoppen, geen emoji in UI
   - geen gradients, glow, gekleurde schaduw of gekleurde border-left,
     behalve de meldingen: daar dráágt de linkerrand de betekenis
   - vijf statuswoorden, altijd voluit. Kleur is nooit de enige drager
   ===================================================== */

/* ---------------------------------------------------
   FOCUS — geldt voor alles wat bedienbaar is.
   outline:none mag alleen als hier iets voor in de plaats komt.
   --------------------------------------------------- */
.btn:focus-visible,
.field-input:focus-visible,
.badge-link:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--ob-focus-ring);
  border-radius: var(--ob-radius-kaart);
}

/* ---------------------------------------------------
   KNOPPEN
   Spec: radius 6px · padding 10/18 · Atkinson bold · nooit uppercase
   --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ob-ruimte-2);
  font-family: var(--ob-font-body);
  font-size: var(--ob-maat-klein);
  font-weight: 500;
  line-height: 1.2;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--ob-radius-ui);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ob-duur-snel) var(--ob-curve),
              color var(--ob-duur-snel) var(--ob-curve),
              border-color var(--ob-duur-snel) var(--ob-curve);
}

/* Primair — antraciet. De standaardknop, want oranje is schaars. */
.btn-primary { background: var(--ob-petrol); color: var(--ob-zand); }
.btn-primary:hover { background: var(--ob-petrol); }

/* Accent — oranje. Eén per scherm, voor de handeling die telt. */
.btn-accent { background: var(--ob-petrol); color: var(--ob-ecru); }
.btn-accent:hover { background: var(--ob-petrol-diep); }

/* Outline — nevenacties naast een primaire knop. */
.btn-outline {
  background: transparent;
  color: var(--ob-petrol);
  border-color: var(--ob-lijn-sterk);
}
.btn-outline:hover { border-color: var(--ob-petrol); background: var(--ob-mist); }

/* Ghost — wegklikken, later, annuleren. */
.btn-ghost { background: transparent; color: var(--ob-gedempt); }
.btn-ghost:hover { color: var(--ob-petrol); background: var(--ob-mist); }

/* Zacht — bevestigende nevenactie binnen een kaart. */
.btn-soft   { background: var(--ob-mist); color: var(--ob-petrol-diep); }
.btn-soft:hover { background: var(--ob-mist); color: var(--ob-petrol); }
.btn-fresh  { background: var(--ob-past-bg); color: var(--ob-past); }

.btn[disabled], .btn.is-disabled {
  background: var(--ob-mist);
  color: var(--ob-gedempt);
  border-color: transparent;
  cursor: not-allowed;
}

.btn-sm { font-size: 13px; padding: 7px 14px; }
.btn-lg { font-size: var(--ob-maat-body); padding: 13px 24px; }

/* ---------------------------------------------------
   BADGES — dieet en status
   Spec: kleurstip vooraan, geen emoji, geen uppercase.
   Kleur is nooit de enige drager: de tekst zegt het ook.
   --------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ob-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 10px 5px 8px;
  border-radius: var(--ob-radius-ui);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }

.badge-fresh     { background: var(--ob-past-bg);  color: var(--ob-past); }
/* Petrol-diep op mist haalt 9,89:1. De oude oranje badge zat op 4,40:1 en had een
   eigen donkerdere tint nodig; met één kleur is dat probleem weg. */
.badge-gbp       { background: var(--ob-mist); color: var(--ob-petrol-diep); }
.badge-histamine { background: var(--ob-aanpassing-bg);  color: var(--ob-aanpassing); }
.badge-restrict  { background: var(--ob-niet-bg);   color: var(--ob-niet); }
.badge-neutral   { background: var(--ob-mist);       color: var(--ob-tekst); }

/* ---------------------------------------------------
   META-LABEL — alles wat een getal of een status is
   Spec: Atkinson bold · tracking 0.06em · uppercase
   Dit is de enige plek waar uppercase is toegestaan.
   --------------------------------------------------- */
.meta {
  font-family: var(--ob-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ob-spatie-label);
  text-transform: uppercase;
  color: var(--ob-gedempt);
}
.meta-strong { color: var(--ob-petrol); font-weight: 600; }
.meta-accent { color: var(--ob-petrol); }

/* ---------------------------------------------------
   KAARTEN
   Spec: radius 2px, 1px lijn, geen slagschaduw tenzij hij zweeft.
   --------------------------------------------------- */
.card {
  background: var(--ob-ecru);
  border: 1px solid var(--ob-lijn);
  border-radius: var(--ob-radius-kaart);
  padding: var(--ob-ruimte-5);
}
.card-flat { background: var(--ob-mist); border-color: transparent; }
.card-raised { box-shadow: var(--ob-schaduw-zacht); }

.card-title {
  font-family: var(--ob-font-display);
  font-size: 20px;
  line-height: 1.1;
  color: var(--ob-petrol);
  margin: 0 0 var(--ob-ruimte-2);
}
.card-text { font-size: 13px; line-height: 1.5; color: var(--ob-gedempt); margin: 0; }
.card-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--ob-lijn);
  margin-top: var(--ob-ruimte-4); padding-top: var(--ob-ruimte-3);
}
.card-link { font-size: 12px; font-weight: 600; color: var(--ob-petrol); text-decoration: none; }
.card-link:hover { text-decoration: underline; }

/* Maaltijdkaart — het meest gebruikte component van de site */
.meal { background: var(--ob-ecru); border: 1px solid var(--ob-lijn); border-radius: var(--ob-radius-kaart); overflow: hidden; }
.meal-media { aspect-ratio: 16 / 9; background: var(--ob-mist); display: block; width: 100%; object-fit: cover; }
.meal-body { padding: var(--ob-ruimte-4); }
.meal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ob-ruimte-4); }
.meal-name {
  font-family: var(--ob-font-display);
  font-size: 22px; line-height: 1.05; color: var(--ob-petrol);
  margin: var(--ob-ruimte-1) 0 0;
}
.meal-badges { display: flex; flex-direction: column; gap: var(--ob-ruimte-1); align-items: flex-end; flex-shrink: 0; }
.meal-meta {
  display: flex; gap: var(--ob-ruimte-5);
  border-top: 1px solid var(--ob-lijn);
  margin-top: var(--ob-ruimte-4); padding-top: var(--ob-ruimte-3);
  font-family: var(--ob-font-body); font-size: 12px; color: var(--ob-gedempt);
}
.meal-meta b { color: var(--ob-petrol); font-weight: 500; }

/* ---------------------------------------------------
   FORMULIER
   Niet uit de stijlkaart — die behandelt formulieren niet,
   terwijl de site inloggen, registreren, contact en
   recept-indienen heeft. Afgeleid van de bestaande regels:
   radius 6px (--ob-radius-ui is in de stijlkaart al "invoerveld"),
   rand met 3:1 contrast, label altijd zichtbaar.
   --------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ob-ruimte-5); }

.field-label { font-size: var(--ob-maat-klein); font-weight: 500; color: var(--ob-petrol); }
.field-label .req { color: var(--ob-niet); margin-left: 2px; }

.field-input {
  font-family: var(--ob-font-body);
  font-size: var(--ob-maat-body);
  color: var(--ob-petrol);
  background: var(--ob-ecru);
  border: 1px solid var(--ob-veldlijn);
  border-radius: var(--ob-radius-ui);
  padding: 11px 14px;
  width: 100%;
  transition: border-color var(--ob-duur-snel) var(--ob-curve);
}
.field-input::placeholder { color: var(--ob-gedempt); }
.field-input:hover { border-color: var(--ob-petrol); }

/* De hint hoort onder het label, niet als placeholder:
   een placeholder verdwijnt zodra je begint te typen. */
.field-hint { font-size: 13px; color: var(--ob-gedempt); }

.field-error .field-input { border-color: var(--ob-niet); border-width: 2px; }
.field-error .field-hint  { color: var(--ob-niet); font-weight: 500; }

.field-input[disabled] {
  background: var(--ob-mist);
  color: var(--ob-gedempt);
  border-color: var(--ob-lijn);
  cursor: not-allowed;
}