/* ============================================================================
   gen-ui-xte.css  |  tokenbrug tussen het XTE OS en gen-ui.css
   ----------------------------------------------------------------------------
   gen-ui.css leest host-tokens met andere namen dan het OS gebruikt
   (--bg-1/--card tegenover --panel, --text-1 tegenover --text). Dit bestand
   vertaalt de ene set naar de andere, binnen .gen, zodat er niets in
   styles.css hoeft te veranderen en elke tenant automatisch meekleurt.

   Alles is afgeleid uit bestaande OS-tokens. Er staat geen merkkleur in die
   niet uit het OS komt, op de twee functionele statuskleuren na (warn, err);
   die zijn hieronder apart gemarkeerd en verklaard.

   Laadvolgorde in index.html:
     styles.css  ->  gen-ui.css  ->  gen-ui-xte.css
   ========================================================================== */

.gen {
  /* -- tekst -------------------------------------------------------------- */
  --text-1: var(--text);
  --text-2: var(--muted);

  /* --faint haalt op --panel maar 3,26:1 (donker) en 3,61:1 (licht). gen-ui
     trekt dit niveau zelf nog 15% naar de tekstkleur, en dan is het nog steeds
     4,35:1. Daarom hier al 20% naar --muted getrokken: dat brengt het eindpunt
     op 4,94:1 donker en 4,86:1 licht, zonder dat het niveau zijn rol verliest. */
  --text-3: color-mix(in srgb, var(--faint) 80%, var(--muted));

  /* -- vlakken ------------------------------------------------------------ */
  --bg-1: var(--panel);
  --bg-2: var(--panel-2);
  --bg-3: var(--panel-3);
  --bg-0: var(--bg);

  /* --line en --line-strong heten in beide sets hetzelfde en worden dus
     rechtstreeks gelezen. Alleen de zachte variant ontbreekt. */
  --line-soft: var(--line);

  /* -- accent ------------------------------------------------------------- */
  /* Twee rollen uit elkaar gehouden: terracotta als tekst haalt in licht maar
     4,24:1, als vlak is dat geen probleem. De tekstvariant wordt daarom 15%
     naar --text getrokken; omdat --text per thema kantelt, werkt diezelfde
     formule in donker (5,88:1) en in licht (5,15:1). */
  --accent-soft:    color-mix(in srgb, var(--terra) 85%, var(--text));
  --accent:         var(--terra);
  --accent-fill:    var(--terra);
  --on-fill:        #fff;
  --accent-bg:      color-mix(in srgb, var(--terra) 14%, transparent);

  /* -- status ------------------------------------------------------------- */
  /* ok is de olijf uit de wordmark, met dezelfde tekstcorrectie: 8,55:1 donker,
     4,94:1 licht. */
  --ok: color-mix(in srgb, var(--olive) 85%, var(--text));

  /* De enige twee kleuren die niet uit het OS komen. Het OS kent geen
     waarschuwings- of foutkleur als token; deze twee zijn functioneel afgeleid
     van de wordmark-warmte en staan bewust hier, zodat ze op een plek te
     wijzigen zijn zodra het OS ze wel heeft. */
  --gen-warn-basis: #d9a05b;
  --gen-err-basis:  #c65f4f;
  --warn: color-mix(in srgb, var(--gen-warn-basis) 85%, var(--text));
  --err:  color-mix(in srgb, var(--gen-err-basis) 85%, var(--text));

  /* -- vorm en type ------------------------------------------------------- */
  --r-card:  12px;
  --r-panel: 10px;
  --r-btn:   10px;
  --r-tag:   6px;
  --display: var(--serif);   /* koppen in Literata, zoals de modal-koppen in het OS */
  --w-max:   600;
  --ease-out: var(--ease);
}

/* In licht staan de drie statuskleuren niet op --panel maar op hun eigen getinte
   vlak (14% van de kleur zelf), en dat vlak is lichter dan --panel. Gemeten op de
   echte elementen haalt 85% daar 3,33:1 (callout-titel), 4,12:1 (badge) en
   4,69:1 (delta). Ze worden in licht dus dieper gemengd. De percentages hieronder
   zijn gemeten, niet geschat: zie de tabel in README.md. */
:root[data-theme="light"] .gen {
  --warn: color-mix(in srgb, var(--gen-warn-basis) 35%, var(--text));
  --ok:   color-mix(in srgb, var(--olive) 55%, var(--text));
  --err:  color-mix(in srgb, var(--gen-err-basis) 55%, var(--text));
}

/* ----------------------------------------------------------------------------
   Rail-context. styles.css zet `.bubble p { color: var(--muted); font-size: 14px }`
   met dezelfde specificiteit als `.gen p`, dus zonder deze regel beslist de
   laadvolgorde wie wint. Met `.bubble .gen` ervoor staat het vast, ook als
   iemand de volgorde in index.html later omgooit.
   -------------------------------------------------------------------------- */
.bubble .gen :is(p, li, td, th, dd, dt) {
  color: var(--g-text-2);
  font-size: inherit;
  line-height: inherit;
}
.bubble .gen p { margin: 0 0 var(--g-flow); }
.bubble .gen > :last-child { margin-bottom: 0; }

/* Grafiekvlak. De marks en kleuren zitten in gen-ui-charts.js, hier alleen de ruimte. */
.gen .jev-chart-fig { margin: 18px 0 10px; }
.gen .jev-chart-fig figcaption { margin-bottom: 2px; font-size: 13px; color: var(--g-text-3); }
.gen .jev-chart { position: relative; height: 240px; margin: 0; }
.gen .jev-chart canvas { position: absolute; inset: 0; }