/*
 * Qoinomics – design system (v215: wit en strak)
 * Witte vlakken, Qoinomics-blauw als kop en tekst, amber als accent (actief, versturen, Qoins), teal voor openbaar en focus.
 * Blokken in plaats van ronde vormen: rechte hoeken (radius 0–2 px). Kleuren per soort bericht: openbaar teal, privé blauw,
 * netwerk helder blauw, NPC en zakelijk amber. Gebruik deze variabelen in nieuwe en gemigreerde schermen; geen losse kleurcodes.
 */
:root {
  /* oppervlakken (wit) */
  --qn-ink: #ffffff;            /* paneel, dock */
  --qn-ink-2: #f4f7f9;          /* vlak binnen een paneel (chat, kaart) */
  --qn-ink-3: #eef3f6;          /* knop, chip, berichtblok, invoer bij hover */
  --qn-glass: #ffffff;
  --qn-glass-strong: #ffffff;
  --qn-blur: none;
  --qn-line: #e6eaee;
  --qn-line-2: #d7dde3;

  /* tekst */
  --qn-text: #123C69;           /* Qoinomics-blauw */
  --qn-text-2: #5b7590;
  --qn-text-3: #8a9aab;

  /* merk en betekenis */
  --qn-blue: #123C69;
  --qn-blue-2: #3c78b8;          /* netwerk */
  --qn-teal: #2A9D8F;            /* openbaar, focus */
  --qn-teal-2: #2A9D8F;
  --qn-amber: #F4B942;           /* accent: actief, versturen, Qoins, NPC / zakelijk */
  --qn-violet: #123C69;          /* (privé is nu blauw) */
  --qn-sky: #3c78b8;
  --qn-ok: #2e9e57;
  --qn-danger: #d64545;
  --qn-ivory: #FAFAF7;

  /* typografie */
  --qn-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --qn-fs-xs: 12px; --qn-fs-s: 14px; --qn-fs-m: 16px; --qn-fs-l: 20px; --qn-fs-xl: 24px;

  /* spacing: raster van 4 px */
  --qn-s1: 4px; --qn-s2: 8px; --qn-s3: 12px; --qn-s4: 16px; --qn-s5: 20px; --qn-s6: 24px;

  /* blokken: rechte hoeken */
  --qn-r-s: 0px; --qn-r-m: 0px; --qn-r-l: 0px; --qn-r-pill: 0px;
  --qn-shadow: 0 10px 28px rgba(18, 60, 105, 0.22);
  --qn-shadow-s: 0 3px 10px rgba(18, 60, 105, 0.16);

  /* staten */
  --qn-focus: 0 0 0 2px var(--qn-teal);
  --qn-hover: #eef3f6;
  --qn-active: #eef3f6;

  /* maten */
  --qn-dock-h: 64px;
  --qn-panel-w: 400px;
  --qn-ease: cubic-bezier(.2, .7, .2, 1);
}

/* knoppen (blokken) */
.qn-btn { font: 600 var(--qn-fs-s) var(--qn-font); color: var(--qn-text); background: var(--qn-ink-3); border: 0; border-radius: 0; padding: 10px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: var(--qn-s2); transition: background .15s, color .15s; }
.qn-btn:hover { background: #e2eaf0; }
.qn-btn:focus-visible { outline: none; box-shadow: var(--qn-focus); }
.qn-btn:disabled { opacity: .45; cursor: default; }
.qn-btn.primary { background: var(--qn-amber); color: var(--qn-blue); }
.qn-btn.primary:hover { background: #f7c766; }
.qn-btn.ghost { background: transparent; }
.qn-btn.ghost:hover { background: var(--qn-ink-3); }
.qn-kbd { font: 600 11px var(--qn-font); color: var(--qn-text-2); background: #fff; border: 1px solid var(--qn-line-2); border-bottom-width: 2px; padding: 0 5px; }

/* moderne scrollbalk: smal, teal, zonder pijltjes */
html.qn-ui-new * { scrollbar-width: thin; scrollbar-color: var(--qn-teal) transparent; }
html.qn-ui-new *::-webkit-scrollbar { width: 8px; height: 8px; }
html.qn-ui-new *::-webkit-scrollbar-track { background: transparent; }
html.qn-ui-new *::-webkit-scrollbar-thumb { background: var(--qn-teal); border: 2.5px solid transparent; background-clip: padding-box; border-radius: 0; }
html.qn-ui-new *::-webkit-scrollbar-thumb:hover { border-width: 1px; }
html.qn-ui-new *::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

@media (prefers-reduced-motion: reduce) { :root { --qn-ease: linear; } }