/* ============================================================================
   REX.digital — aanvullingen voor de Brand Tool
   ----------------------------------------------------------------------------
   rex-brand.css blijft ongewijzigd. Dit bestand vult alleen aan wat de tool
   extra nodig heeft, en gebruikt daarvoor de tokens uit :root van rex-brand.css.

   Waarom dit nodig is: de tool is een React-app die zijn opmaak grotendeels via
   inline-stijlen zet. Formuliervelden krijgen daardoor wel een donkere
   achtergrond, maar houden zonder deze regels hun standaard zwarte tekstkleur
   en zouden onleesbaar zijn.
   ========================================================================== */

/* ---------------------------------------------------------- LICHT THEMA -- */
/* Donker is de standaard. Zet de tool op licht, dan krijgt body de class
   'rex-light' en wisselen de tokens hieronder mee. rex-brand.css blijft ongemoeid;
   we overschrijven hier alleen de waarden. */
body.rex-light {
  --surface-base: 244 244 246;   /* paginaachtergrond */
  --surface-card: 255 255 255;   /* kaarten en velden */
  --surface-line: 229 231 235;   /* randen */
  --ink: 17 24 39;               /* koppen en nadruk */
  --ink-muted: 107 114 128;      /* lopende tekst */
  --state-ok: 22 163 74;
  --state-warn: 202 138 4;
  --state-error: 220 38 38;
}

/* Formuliervelden: leesbaar op de donkere achtergrond.
   De achtergrond staat hier en niet inline, zodat velden die in de app geen eigen
   achtergrond meekrijgen niet wit blijven met witte tekst erin. */
input,
select,
textarea {
  background: rgb(var(--surface-card));
  color: rgb(var(--ink));
  font-family: var(--rex-font);
  caret-color: rgb(var(--brand-purple));
}

/* Selectievakjes en keuzerondjes in de accentkleur. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: rgb(var(--brand-purple));
}

/* Kleurkiezer houdt zijn eigen weergave; geen donkere achtergrond forceren. */
input[type="color"] {
  background: transparent;
  padding: 0;
}

input::placeholder,
textarea::placeholder {
  color: rgb(var(--ink-muted) / 0.7);
}

/* Keuzelijsten: de uitklaplijst zelf komt van het besturingssysteem en moet
   apart donker gezet worden, anders is het wit met witte tekst. */
select option {
  background: rgb(var(--surface-card));
  color: rgb(var(--ink));
}

/* Datumvelden tonen standaard een donker kalendericoon; op donker onzichtbaar. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.6);
}

/* Bestandskiezer leesbaar houden. */
input[type="file"] {
  color: rgb(var(--ink-muted));
}
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 1px solid rgb(var(--surface-line));
  border-radius: var(--rex-radius-pill);
  background: rgb(var(--surface-card));
  color: rgb(var(--ink));
  font-family: var(--rex-font);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  border-color: rgb(var(--brand-purple));
}

/* Schuifbalken in de donkere stijl. */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--surface-line));
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--ink-muted) / 0.5); }

/* Het opstartscherm voordat de app geladen is. */
#boot {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: var(--rex-font);
  color: rgb(var(--ink-muted));
}

/* De app vult het scherm. */
html, body, #root { height: 100%; }