/* dsb-tokens.css  -  De Slimme Brug design tokens
 * Primitieven voor het DSB Design System. Importeer dit en bouw componenten
 * uitsluitend op deze variabelen, zodat de monitor één taal spreekt met de rest. */

:root {
  /* --- kleur: oppervlakken --- */
  --dsb-navy-900: #081421;   /* app-achtergrond            */
  --dsb-navy-800: #0c1f33;   /* kaart / paneel             */
  --dsb-navy-700: #112942;   /* verhoogd vlak              */
  --dsb-line:     #1f3a55;   /* randen, scheidingen        */

  /* --- kleur: tekst --- */
  --dsb-ink:       #e8eef5;  /* primaire tekst             */
  --dsb-ink-dim:   #8aa2ba;  /* secundaire tekst           */
  --dsb-ink-faint: #5d748c;  /* labels, captions           */

  /* --- kleur: merk + status --- */
  --dsb-orange:      #ff6b2c; /* merkaccent, status 'open' / afwijking */
  --dsb-orange-soft: #ffae85;
  --dsb-amber:       #f4b740; /* 'gepland' / let op         */
  --dsb-ok:          #3fb27f; /* gezond / live              */
  --dsb-blue:        #5aa9e6; /* weer / referentielijnen    */

  /* --- semantisch: brugstatus (NDW) --- */
  --dsb-status-open:    var(--dsb-orange);
  --dsb-status-gepland: var(--dsb-amber);
  --dsb-status-dicht:   var(--dsb-ink-dim);

  /* --- semantisch: gezondheid (DSB) --- */
  --dsb-health-gezond:    var(--dsb-ok);
  --dsb-health-letop:     var(--dsb-amber);
  --dsb-health-afwijkend: var(--dsb-orange);

  /* --- typografie --- */
  --dsb-font-display: "Space Grotesk", system-ui, sans-serif;  /* 700/900: koppen, getallen */
  --dsb-font-body:    "Inter", system-ui, sans-serif;    /* lopende tekst             */
  --dsb-font-mono:    "JetBrains Mono", monospace;        /* data, labels, tijden      */

  --dsb-text-xs: 11px;   /* labels (mono, letter-spacing .14em, uppercase) */
  --dsb-text-sm: 13px;
  --dsb-text-md: 15px;
  --dsb-text-lg: 20px;
  --dsb-text-xl: 26px;   /* kerngetallen */

  /* --- maatvoering --- */
  --dsb-radius-sm: 8px;
  --dsb-radius-md: 11px;
  --dsb-radius-lg: 14px;
  --dsb-pad:       16px;
  --dsb-gap:       12px;
}

/* ---- component-primitieven (klassen die je in je design system kunt overnemen) ---- */

/* status-badge: NDW open/gepland/dicht */
.dsb-badge { font-family: var(--dsb-font-mono); font-size: var(--dsb-text-xs);
  padding: 3px 9px; border-radius: 100px; display: inline-block; letter-spacing: .04em; }
.dsb-badge--open    { background: rgba(255,107,44,.16); color: var(--dsb-status-open); }
.dsb-badge--gepland { background: rgba(244,183,64,.15); color: var(--dsb-status-gepland); }
.dsb-badge--dicht   { background: rgba(138,162,186,.12); color: var(--dsb-status-dicht); }

/* health-badge: DSB gezondheid */
.dsb-health { font-family: var(--dsb-font-mono); font-size: var(--dsb-text-xs);
  padding: 3px 9px; border-radius: 100px; display: inline-block; }
.dsb-health--gezond    { background: rgba(63,178,127,.15); color: var(--dsb-health-gezond); }
.dsb-health--letop     { background: rgba(244,183,64,.15); color: var(--dsb-health-letop); }
.dsb-health--afwijkend { background: rgba(255,107,44,.18); color: var(--dsb-health-afwijkend); }

/* metric-card: kerngetal met label en eenheid */
.dsb-metric { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line);
  border-radius: var(--dsb-radius-md); padding: 13px 15px; }
.dsb-metric__k { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dsb-ink-faint); }
.dsb-metric__v { font-family: var(--dsb-font-display); font-weight: 900;
  font-size: var(--dsb-text-xl); margin-top: 5px; line-height: 1; }

/* card: generiek paneel */
.dsb-card { background: var(--dsb-navy-800); border: 1px solid var(--dsb-line);
  border-radius: var(--dsb-radius-lg); padding: var(--dsb-pad); }