/*
  Kleuren en algemene stijl, gedeeld door alle pagina's.
  Alle kleuren staan hier op één plaats: de huisstijl van I-Leadership komt later hier.
*/

/* ---- Kleuren per rol (licht) ---- */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface-1: #fcfcfb;
  --column-bg: #f0efec;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --border: rgba(11, 11, 11, 0.10);
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  --brand: #2a78d6; /* tijdelijk: wordt de huisstijlkleur van I-Leadership */
}

/* ---- Kleuren per rol (donker, standaard) ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface-1: #1a1a19;
  --column-bg: #141413;
  --text-primary: #f0efec;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --border: rgba(255, 255, 255, 0.10);
}

body {
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- Onderdelen die op meerdere pagina's terugkomen ---- */
.logo {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 700;
}
.muted { color: var(--text-muted); font-size: .8rem; }
.tag {
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px;
  padding: .2rem .6rem;
}
.btn-toggle {
  font-size: .75rem; padding: .15rem .6rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  text-decoration: none;
}
.btn-toggle:hover { color: var(--text-primary); }
.btn-toggle[aria-current="true"] { background: var(--text-primary); color: var(--page); }