/* ══════════════════════════════════════════════════════════════════
   TruckCharge — ontwerpsysteem
   Alle kleuren, fonts en maten op één plek. Wil je de app een andere
   uitstraling geven, pas dan hier iets aan en het werkt overal door.
   ══════════════════════════════════════════════════════════════════ */

:root{

  /* ── KLEUREN ───────────────────────────────────────────────────
     De app is opgebouwd rond drie donkere lagen die op elkaar
     stapelen: bg (achtergrond) → surface (panelen) → surface2
     (invoervelden en kaartjes bínnen panelen).                    */

  --bg:       #0D0F14;   /* diepste laag: body en kaartachtergrond */
  --surface:  #161A22;   /* kopbalk, zijpaneel, modals             */
  --surface2: #1E2430;   /* invoervelden, tags, kaartjes           */
  --border:   rgba(255,255,255,0.09);  /* subtiele scheidingslijn  */

  --text:     #F0F2F7;   /* gewone tekst                            */
  --muted:    #8A90A0;   /* bijschriften, labels, secundair         */

  /* ── ACCENTEN ──────────────────────────────────────────────────
     Elke kleur heeft één betekenis. Niet door elkaar gebruiken,
     anders verliezen de waarschuwingen hun kracht.                */

  --accent: #00C37B;   /* groen  — goed, bevestigd, ≥150 kW         */
  --warn:   #FFB347;   /* geel   — let op, 100-150 kW, eigen punt   */
  --danger: #FF5C5C;   /* rood   — fout, verwijderen, <100 kW       */
  --info:   #4A9EFF;   /* blauw  — externe link, exploitant, jouw
                                   locatie op de kaart              */
  --unver:  #FF8A2B;   /* oranje — NIET geverifieerd (gloeit)       */

  /* ── TYPOGRAFIE ────────────────────────────────────────────────
     Twee fonts: Syne voor koppen en cijfers (kort, karaktervol),
     DM Sans voor lopende tekst (rustig, goed leesbaar klein).     */

  --fh: 'Syne', sans-serif;      /* koppen, badges, getallen       */
  --fb: 'DM Sans', sans-serif;   /* alles wat je leest             */

  /* ── VEILIGE ZONES (telefoon) ──────────────────────────────────
     Voorkomt dat knoppen onder de notch of de home-balk vallen.   */

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ── MATEN ─────────────────────────────────────────────────────  */

  --peek: 130px;   /* hoogte van het strookje onderpaneel dat
                      zichtbaar blijft als de lijst dicht is       */
}


/* ══════════════════════════════════════════════════════════════════
   VUISTREGELS DIE OVERAL TERUGKOMEN
   ══════════════════════════════════════════════════════════════════

   Afronding
     4-5px   kleine tags en badges
     8-9px   knoppen en invoervelden
     11-12px kaartjes en panelen
     18px    bovenkant van het onderpaneel
     20px    pillen (filterknoppen) en het toast-bericht

   Raakvlakken
     Alles wat je met een vinger aantikt is minimaal 44x44 px.
     Dat is de reden dat de kaartknoppen precies 44px zijn en de
     invoervelden 11px padding hebben in plaats van 8.

   Lettergroottes op mobiel
     Invoervelden staan bewust op 16px. Alles daaronder laat iOS
     inzoomen zodra je een veld aantikt — heel vervelend onderweg.

   Diepte
     Geen zware schaduwen. Lagen worden onderscheiden door
     achtergrondkleur en een lijn van 1px, niet door schaduw.
     Uitzondering: het onderpaneel en de zwevende knoppen, die
     écht boven de kaart hangen.

   Beweging
     .28s cubic-bezier(.4,0,.2,1) voor het schuiven van panelen
     .15s voor kleurwissels bij aanraken
     De enige animatie die aandacht trekt is de gloed om
     niet-geverifieerde meldingen — die moet je zien.
   ══════════════════════════════════════════════════════════════════ */