/* ==========================================================================
   HOTTENS · huisstijl.css
   Fundament van de gedeelde stijl: tokens, thema's, reset, basistypografie,
   layout-primitieven en hulpklassen. Onderdelen staan in onderdelen.css.

   Gebruik:
     <link rel="stylesheet" href="huisstijl.css">
     <link rel="stylesheet" href="onderdelen.css">

   Alles zit in cascade-layers. CSS van de app zelf (zonder layer) wint dus
   altijd, zonder !important of specificiteitsgevechten.

   Thema:     <html data-theme="light|dark">   (leeg = volgt het systeem)
   Dichtheid: <html data-density="compact">    (voor trading / grote tabellen)
   Accent:    <html data-accent="munt|amber|framboos">  (per app; leeg = het accent van de wereld)
   Wereld:    de tokens komen uit werelden/<naam>/tokens.json via bin/tokens-bouwen.py (zie werelden/actief); moves per wereld in werelden/<naam>/moves.css
   ========================================================================== */

/* Fonts worden meegeleverd (fonts/, SIL OFL), zodat de stijl ook zonder internet werkt. Paden zijn relatief aan dit bestand. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); }

@layer h.reset, h.basis, h.layout, h.onderdelen, h.moves, h.hulp;

/* --------------------------------------------------------------------------
   1. TOKENS — licht thema (standaard)
   -------------------------------------------------------------------------- */
@layer h.basis {
  /* @@ tokens weerkaart — gegenereerd door bin/tokens-bouwen.py uit werelden/weerkaart/tokens.json; niet met de hand bewerken @@ */
  /* Weerkaart (KNMI / Buienradar) (sinds 2026-10-25): Het huis als weerkaart: kaartgrijs als het droog is, een massieve KNMI-blauwe schil, en één intensiteitsschaal (activiteit → let op → storing) voor alles wat aandacht vraagt. Groen/rood alleen voor winst/verlies. */
  :root {
    color-scheme: light;
    --h-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --h-font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --h-fs-2xs: 0.6875rem;
    --h-fs-xs: 0.75rem;
    --h-fs-sm: 0.8125rem;
    --h-fs-md: 0.9375rem;
    --h-fs-lg: 1.0625rem;
    --h-fs-xl: 1.3125rem;
    --h-fs-2xl: 1.75rem;
    --h-fs-3xl: 2.25rem;
    --h-fs-4xl: 3rem;
    --h-lh-tight: 1.15;
    --h-lh-snug: 1.35;
    --h-lh: 1.6;
    --h-tracking-tight: -0.022em;
    --h-tracking-label: 0.08em;
    --h-space-1: 0.25rem;
    --h-space-2: 0.5rem;
    --h-space-3: 0.75rem;
    --h-space-4: 1rem;
    --h-space-5: 1.25rem;
    --h-space-6: 1.5rem;
    --h-space-8: 2rem;
    --h-space-10: 2.5rem;
    --h-space-12: 3rem;
    --h-space-16: 4rem;
    --h-control-h: 2.5rem;
    --h-control-h-sm: 2rem;
    --h-control-h-lg: 3rem;
    --h-cell-py: 0.8rem;
    --h-cell-px: 1rem;
    --h-card-pad: 1.5rem;
    --h-gap: 1.5rem;
    --h-radius-xs: 2px;
    --h-radius-sm: 3px;
    --h-radius: 4px;
    --h-radius-lg: 6px;
    --h-radius-xl: 10px;
    --h-radius-pill: 999px;
    --h-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --h-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --h-dur-1: 120ms;
    --h-dur-2: 200ms;
    --h-dur-3: 360ms;
    --h-sidebar-w: 15.5rem;
    --h-topbar-h: 3.75rem;
    --h-content-max: 80rem;
    --h-prose-max: 42rem;
    --h-z-sticky: 10;
    --h-z-dropdown: 30;
    --h-z-modal: 50;
    --h-z-toast: 60;
    --h-ring: 0 0 0 3px color-mix(in srgb, var(--h-accent) 35%, transparent);

    --h-bg: #dfe7ee;
    --h-bg-grid: rgb(11 42 74 / 0.06);
    --h-surface: #eef2f6;
    --h-surface-2: #ffffff;
    --h-surface-3: #e3eaf1;
    --h-surface-inv: #0b2a4a;
    --h-border: #c9d4de;
    --h-border-strong: #a9b8c7;
    --h-text: #0f1c2b;
    --h-text-2: #4a5a6b;
    --h-text-3: #5b6d82;
    --h-text-inv: #f4f8fc;
    --h-shell: #0b2a4a;
    --h-shell-2: rgb(255 255 255 / 0.12);
    --h-shell-border: rgb(255 255 255 / 0.22);
    --h-on-shell: #ffffff;
    --h-on-shell-2: #a9c3e0;
    --h-accent: #2f6fd0;
    --h-accent-hover: #255cb0;
    --h-accent-soft: #dde9fa;
    --h-accent-text: #255cb0;
    --h-on-accent: #ffffff;
    --h-zest: #5aa7e6;
    --h-zest-soft: #e3f1fc;
    --h-on-zest: #0f1c2b;
    --h-pos: #0f8a5f;
    --h-pos-soft: #dff3ea;
    --h-neg: #c2362f;
    --h-neg-soft: #fbe5e3;
    --h-warn: #2f6fd0;
    --h-warn-soft: #e6effb;
    --h-info: #5aa7e6;
    --h-info-soft: #e6f3fc;
    --h-storm: #7b3fb8;
    --h-storm-soft: #f1e9f8;
    --h-int-0: #ffffff;
    --h-int-1: #5aa7e6;
    --h-int-2: #2f6fd0;
    --h-int-3: #7b3fb8;
    --h-chart-1: #2f6fd0;
    --h-chart-2: #0f8a5f;
    --h-chart-3: #e08a1c;
    --h-chart-4: #7b3fb8;
    --h-chart-5: #5aa7e6;
    --h-chart-6: #6b7a8b;
    --h-shadow-sm: 0 1px 2px rgb(11 42 74 / 0.08);
    --h-shadow: 0 1px 2px rgb(11 42 74 / 0.06), 0 6px 16px -6px rgb(11 42 74 / 0.14);
    --h-shadow-lg: 0 2px 6px rgb(11 42 74 / 0.08), 0 24px 48px -12px rgb(11 42 74 / 0.22);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --h-bg: #0b1626;
      --h-bg-grid: rgb(120 160 220 / 0.06);
      --h-surface: #122034;
      --h-surface-2: #182a40;
      --h-surface-3: #1f3349;
      --h-surface-inv: #eef3f8;
      --h-border: #233850;
      --h-border-strong: #35506c;
      --h-text: #e6edf5;
      --h-text-2: #a3b4c6;
      --h-text-3: #7f94ab;
      --h-text-inv: #0b1626;
      --h-shell: #0e2f52;
      --h-shell-2: rgb(255 255 255 / 0.1);
      --h-shell-border: rgb(255 255 255 / 0.22);
      --h-on-shell: #e6edf5;
      --h-on-shell-2: #9fb6cf;
      --h-accent: #6fa6ff;
      --h-accent-hover: #8db8ff;
      --h-accent-soft: #1a3356;
      --h-accent-text: #8db8ff;
      --h-on-accent: #0b1626;
      --h-zest: #4b9ee0;
      --h-zest-soft: #0f2a44;
      --h-on-zest: #e6edf5;
      --h-pos: #3fcf98;
      --h-pos-soft: #0f2e24;
      --h-neg: #ff7b72;
      --h-neg-soft: #3a1a1c;
      --h-warn: #6fa6ff;
      --h-warn-soft: #16305a;
      --h-info: #4b9ee0;
      --h-info-soft: #0f2a44;
      --h-storm: #b27cf0;
      --h-storm-soft: #2d1f45;
      --h-int-0: #182a40;
      --h-int-1: #3f8fd6;
      --h-int-2: #6fa6ff;
      --h-int-3: #b27cf0;
      --h-chart-1: #6fa6ff;
      --h-chart-2: #3fcf98;
      --h-chart-3: #ffb14d;
      --h-chart-4: #b27cf0;
      --h-chart-5: #4b9ee0;
      --h-chart-6: #8d9bb0;
      --h-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
      --h-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 6px 20px -6px rgb(0 0 0 / 0.5);
      --h-shadow-lg: 0 2px 6px rgb(0 0 0 / 0.4), 0 28px 56px -12px rgb(0 0 0 / 0.65);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --h-bg: #0b1626;
    --h-bg-grid: rgb(120 160 220 / 0.06);
    --h-surface: #122034;
    --h-surface-2: #182a40;
    --h-surface-3: #1f3349;
    --h-surface-inv: #eef3f8;
    --h-border: #233850;
    --h-border-strong: #35506c;
    --h-text: #e6edf5;
    --h-text-2: #a3b4c6;
    --h-text-3: #7f94ab;
    --h-text-inv: #0b1626;
    --h-shell: #0e2f52;
    --h-shell-2: rgb(255 255 255 / 0.1);
    --h-shell-border: rgb(255 255 255 / 0.22);
    --h-on-shell: #e6edf5;
    --h-on-shell-2: #9fb6cf;
    --h-accent: #6fa6ff;
    --h-accent-hover: #8db8ff;
    --h-accent-soft: #1a3356;
    --h-accent-text: #8db8ff;
    --h-on-accent: #0b1626;
    --h-zest: #4b9ee0;
    --h-zest-soft: #0f2a44;
    --h-on-zest: #e6edf5;
    --h-pos: #3fcf98;
    --h-pos-soft: #0f2e24;
    --h-neg: #ff7b72;
    --h-neg-soft: #3a1a1c;
    --h-warn: #6fa6ff;
    --h-warn-soft: #16305a;
    --h-info: #4b9ee0;
    --h-info-soft: #0f2a44;
    --h-storm: #b27cf0;
    --h-storm-soft: #2d1f45;
    --h-int-0: #182a40;
    --h-int-1: #3f8fd6;
    --h-int-2: #6fa6ff;
    --h-int-3: #b27cf0;
    --h-chart-1: #6fa6ff;
    --h-chart-2: #3fcf98;
    --h-chart-3: #ffb14d;
    --h-chart-4: #b27cf0;
    --h-chart-5: #4b9ee0;
    --h-chart-6: #8d9bb0;
    --h-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --h-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 6px 20px -6px rgb(0 0 0 / 0.5);
    --h-shadow-lg: 0 2px 6px rgb(0 0 0 / 0.4), 0 28px 56px -12px rgb(0 0 0 / 0.65);
  }

  :root[data-accent="munt"] { --h-accent: #00936f; --h-accent-hover: #007a5c; --h-accent-text: #007a5c; --h-accent-soft: #dff5ee; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="munt"] { --h-accent: #2fd4a4; --h-accent-hover: #5ce0b9; --h-accent-text: #5ce0b9; --h-accent-soft: #0e3029; } }
  :root[data-theme="dark"][data-accent="munt"] { --h-accent: #2fd4a4; --h-accent-hover: #5ce0b9; --h-accent-text: #5ce0b9; --h-accent-soft: #0e3029; }
  :root[data-accent="amber"] { --h-accent: #c46a00; --h-accent-hover: #a65900; --h-accent-text: #a65900; --h-accent-soft: #fff0da; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="amber"] { --h-accent: #ffaa3d; --h-accent-hover: #ffbf6b; --h-accent-text: #ffbf6b; --h-accent-soft: #35250c; } }
  :root[data-theme="dark"][data-accent="amber"] { --h-accent: #ffaa3d; --h-accent-hover: #ffbf6b; --h-accent-text: #ffbf6b; --h-accent-soft: #35250c; }
  :root[data-accent="framboos"] { --h-accent: #d1246b; --h-accent-hover: #b31a5a; --h-accent-text: #b31a5a; --h-accent-soft: #fde6ef; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="framboos"] { --h-accent: #ff6ba6; --h-accent-hover: #ff8fbc; --h-accent-text: #ff8fbc; --h-accent-soft: #3a1528; } }
  :root[data-theme="dark"][data-accent="framboos"] { --h-accent: #ff6ba6; --h-accent-hover: #ff8fbc; --h-accent-text: #ff8fbc; --h-accent-soft: #3a1528; }

  :root[data-density="compact"] {
    --h-control-h: 2.125rem;
    --h-control-h-sm: 1.75rem;
    --h-control-h-lg: 2.5rem;
    --h-cell-py: 0.45rem;
    --h-cell-px: 0.75rem;
    --h-card-pad: 1rem;
    --h-gap: 1rem;
  }
  /* @@ einde tokens @@ */
}

/* --------------------------------------------------------------------------
   4. RESET — modern en klein
   -------------------------------------------------------------------------- */
@layer h.reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100dvh; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  table { border-collapse: collapse; border-spacing: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  p, h1, h2, h3, h4, h5, h6, li, dd, td, th { overflow-wrap: break-word; }
  [hidden] { display: none !important; }
  :target { scroll-margin-block: 5rem; }
}

/* --------------------------------------------------------------------------
   5. BASIS — typografie en elementen
   -------------------------------------------------------------------------- */
@layer h.basis {
  html {
    font-family: var(--h-font);
    font-size: 100%;
    line-height: var(--h-lh);
    color: var(--h-text);
    background: var(--h-bg);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    accent-color: var(--h-accent);
    scrollbar-color: var(--h-border-strong) transparent;
  }

  body {
    font-size: var(--h-fs-md);
    background: var(--h-bg);
    color: var(--h-text);
  }

  /* Het high-tech fundament: een fijn puntraster dat naar onderen vervaagt.
     Zet uit met <body class="no-grid">. */
  body:not(.no-grid) {
    background-image: radial-gradient(var(--h-bg-grid) 1px, transparent 1px);
    background-size: 22px 22px;
    background-attachment: fixed;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 650;
    line-height: var(--h-lh-tight);
    letter-spacing: var(--h-tracking-tight);
    color: var(--h-text);
    text-wrap: balance;
  }
  h1 { font-size: var(--h-fs-3xl); font-weight: 700; }
  h2 { font-size: var(--h-fs-2xl); }
  h3 { font-size: var(--h-fs-xl); }
  h4 { font-size: var(--h-fs-lg); letter-spacing: -0.01em; }
  h5 { font-size: var(--h-fs-md); letter-spacing: 0; }
  h6 {
    font-family: var(--h-font-mono);
    font-size: var(--h-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--h-tracking-label);
    color: var(--h-text-3);
  }

  p { text-wrap: pretty; }
  small { font-size: var(--h-fs-sm); }
  strong, b { font-weight: 620; }

  a {
    color: var(--h-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    transition: text-decoration-color var(--h-dur-1) var(--h-ease);
  }
  a:hover { text-decoration-color: currentColor; }

  code, kbd, samp, pre { font-family: var(--h-font-mono); font-size: 0.9em; }
  code {
    padding: 0.12em 0.4em;
    border-radius: var(--h-radius-xs);
    background: var(--h-surface-3);
    color: var(--h-text);
  }
  pre {
    padding: var(--h-space-4) var(--h-space-5);
    border-radius: var(--h-radius);
    background: var(--h-surface-inv);
    color: var(--h-text-inv);
    overflow-x: auto;
    line-height: 1.55;
  }
  pre code { padding: 0; background: none; color: inherit; }

  kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.1em 0.45em;
    border: 1px solid var(--h-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--h-radius-xs);
    background: var(--h-surface);
    color: var(--h-text-2);
    font-size: var(--h-fs-xs);
    text-align: center;
    line-height: 1.5;
  }

  mark {
    background: var(--h-zest);
    color: var(--h-on-zest);
    padding: 0 0.2em;
    border-radius: 3px;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--h-border);
    margin-block: var(--h-space-8);
  }

  /* Knipoog: selectie in de zest-kleur van de wereld (Weerkaart: lichtblauw) */
  ::selection { background: var(--h-zest); color: var(--h-on-zest); }

  :focus-visible {
    outline: 2px solid var(--h-accent);
    outline-offset: 2px;
    border-radius: var(--h-radius-xs);
  }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: var(--h-border-strong);
    border: 3px solid transparent;
    border-radius: 99px;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-track { background: transparent; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* --------------------------------------------------------------------------
   6. LAYOUT — app-schil en primitieven
   -------------------------------------------------------------------------- */
@layer h.layout {
  /* App-schil: zijbalk + hoofdvlak. Op smalle schermen stapelt hij. */
  .app {
    display: grid;
    grid-template-columns: var(--h-sidebar-w) minmax(0, 1fr);
    min-height: 100dvh;
  }
  .app--no-sidebar { grid-template-columns: minmax(0, 1fr); }

  .app__sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: var(--h-space-6);
    padding: var(--h-space-5) var(--h-space-4);
    border-right: 1px solid var(--h-shell-border, var(--h-border));
    /* een wereld met een schil (--h-shell) kleurt de zijbalk massief; zonder blijft hij een doorschijnend vlak */
    background: var(--h-shell, color-mix(in srgb, var(--h-surface) 82%, transparent));
    color: var(--h-on-shell, inherit);
    backdrop-filter: blur(12px);
    overflow-y: auto;
  }
  .app__main { min-width: 0; display: flex; flex-direction: column; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--h-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--h-space-4);
    min-height: var(--h-topbar-h);
    padding: var(--h-space-2) var(--h-space-8);
    border-bottom: 1px solid var(--h-shell-border, var(--h-border));
    background: var(--h-shell, color-mix(in srgb, var(--h-bg) 78%, transparent));
    color: var(--h-on-shell, inherit);
    backdrop-filter: saturate(1.4) blur(14px);
  }
  .topbar__spacer { flex: 1; }

  .page {
    width: 100%;
    max-width: var(--h-content-max);
    margin-inline: auto;
    padding: var(--h-space-10) var(--h-space-8) var(--h-space-16);
    display: flex;
    flex-direction: column;
    gap: var(--h-space-8);
  }
  .page--narrow { max-width: 52rem; }
  .page--wide   { max-width: none; }

  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--h-space-4) var(--h-space-6);
  }
  .page-header__titles { display: flex; flex-direction: column; gap: var(--h-space-2); min-width: 0; }
  .page-header__title  { font-size: var(--h-fs-3xl); }
  .page-header__sub    { color: var(--h-text-2); max-width: var(--h-prose-max); }
  .page-header__actions { display: flex; flex-wrap: wrap; gap: var(--h-space-2); }

  .section { display: flex; flex-direction: column; gap: var(--h-space-4); }
  .section__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--h-space-4);
    flex-wrap: wrap;
  }

  .container { width: 100%; max-width: var(--h-content-max); margin-inline: auto; padding-inline: var(--h-space-6); }

  /* Primitieven */
  .stack   { display: flex; flex-direction: column; gap: var(--stack-gap, var(--h-space-4)); }
  .stack > * { min-width: 0; }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--h-space-3)); }
  .split   { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--h-space-4); }
  .grid    {
    display: grid;
    gap: var(--grid-gap, var(--h-gap));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
  }
  .grid > * { min-width: 0; }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
  .span-2 { grid-column: span 2; }
  .span-all { grid-column: 1 / -1; }

  @media (max-width: 64rem) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 52rem) {
    .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }   /* anders rekt de zijbalk-rij mee tot de helft van het scherm */
    .app__sidebar {
      position: static;
      height: auto;
      flex-direction: row;
      align-items: center;
      gap: var(--h-space-3);
      padding: var(--h-space-3) var(--h-space-4);
      border-right: 0;
      border-bottom: 1px solid var(--h-shell-border, var(--h-border));
      overflow-x: auto;
      scrollbar-width: none;   /* de rij schuift, maar zonder balk op de schil */
    }
    .topbar { flex-wrap: wrap; padding-inline: var(--h-space-4); }
    .page { padding: var(--h-space-6) var(--h-space-4) var(--h-space-12); gap: var(--h-space-6); }
    .page-header__title { font-size: var(--h-fs-2xl); }
  }

  @media (max-width: 40rem) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
    .span-2 { grid-column: auto; }
  }
}

/* --------------------------------------------------------------------------
   7. HULPKLASSEN — klein, voorspelbaar en altijd winnend binnen de stijl
   -------------------------------------------------------------------------- */
@layer h.hulp {
  /* Getallen en geld */
  .num   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero"; }
  .mono  { font-family: var(--h-font-mono); }
  .pos   { color: var(--h-pos); }
  .neg   { color: var(--h-neg); }
  .warn  { color: var(--h-warn); }
  .info  { color: var(--h-info); }

  /* Tekst */
  .muted   { color: var(--h-text-2); }
  .subtle  { color: var(--h-text-3); }
  .accent  { color: var(--h-accent-text); }
  .eyebrow {
    font-family: var(--h-font-mono);
    font-size: var(--h-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--h-tracking-label);
    color: var(--h-text-3);
  }
  /* Knipoog: '// ' ervoor, als een codecommentaar */
  .eyebrow--code::before { content: "// "; color: var(--h-accent); }

  .lead    { font-size: var(--h-fs-lg); color: var(--h-text-2); line-height: 1.55; max-width: var(--h-prose-max); }
  .prose   { max-width: var(--h-prose-max); }
  .prose > * + * { margin-top: 1em; }
  .text-xs { font-size: var(--h-fs-xs); }
  .text-sm { font-size: var(--h-fs-sm); }
  .text-lg { font-size: var(--h-fs-lg); }
  .text-xl { font-size: var(--h-fs-xl); }
  .text-left   { text-align: left; }
  .text-center { text-align: center; }
  .text-right  { text-align: right; }
  .fw-500 { font-weight: 500; }
  .fw-600 { font-weight: 600; }
  .uppercase { text-transform: uppercase; letter-spacing: var(--h-tracking-label); }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .nowrap   { white-space: nowrap; }
  .strike   { text-decoration: line-through; text-decoration-color: var(--h-text-3); color: var(--h-text-3); }

  /* Weergave en uitlijning */
  .flex        { display: flex; }
  .inline-flex { display: inline-flex; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .justify-end { justify-content: flex-end; }
  .grow   { flex: 1 1 auto; min-width: 0; }
  .shrink-0 { flex-shrink: 0; }
  .w-full { width: 100%; }
  .ml-auto { margin-left: auto; }

  .gap-1 { gap: var(--h-space-1); } .gap-2 { gap: var(--h-space-2); }
  .gap-3 { gap: var(--h-space-3); } .gap-4 { gap: var(--h-space-4); }
  .gap-6 { gap: var(--h-space-6); } .gap-8 { gap: var(--h-space-8); }

  .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--h-space-2); } .mt-4 { margin-top: var(--h-space-4); }
  .mt-6 { margin-top: var(--h-space-6); } .mt-8 { margin-top: var(--h-space-8); }
  .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--h-space-2); } .mb-4 { margin-bottom: var(--h-space-4); }
  .p-0 { padding: 0; }

  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }

  @media (max-width: 52rem) { .hide-mobile { display: none !important; } }
  @media (min-width: 52.01rem) { .show-mobile { display: none !important; } }

  @media print {
    body { background: #fff !important; color: #000; }
    .app__sidebar, .topbar, .no-print { display: none !important; }
    .app { display: block; }
  }
}