/* OPL Eén Landgraaf — brand tokens (intern fractieportaal) */
:root {
  /* Brand */
  --opl-navy: #1B2553;
  --opl-navy-2: #232C5E;
  --opl-navy-deep: #131A3D;
  --opl-orange: #E85A2C;
  --opl-teal: #18A88B;
  --opl-olive: #BFBA1F;

  /* Semantic — light (default) */
  --bg: #F6F4EF;
  --bg-2: #FFFFFF;
  --bg-3: #EFECE4;
  --line: #E2DDD2;
  --line-strong: #C9C2B2;
  --ink: #131A3D;
  --ink-2: #4A4E63;
  --ink-3: #7A7E8E;
  --muted: #9A9DA8;

  --accent: var(--opl-orange);
  --accent-on: #ffffff;
  --positive: var(--opl-teal);
  --warning: var(--opl-olive);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 0 rgba(19,26,61,.04), 0 1px 2px rgba(19,26,61,.06);
  --shadow: 0 4px 16px -4px rgba(19,26,61,.08), 0 2px 4px rgba(19,26,61,.04);

  --font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-scale: 1;
}

[data-theme="dark"] {
  --bg: #0E1330;
  --bg-2: #161C3E;
  --bg-3: #1E2548;
  --line: #2A3160;
  --line-strong: #3B447A;
  --ink: #ECEEF7;
  --ink-2: #BCC0D6;
  --ink-3: #8A90AE;
  --muted: #6A708E;
  --accent-on: #ffffff;
  --shadow-sm: 0 1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 6px 20px -4px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.25);
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
.opl { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; font-size: calc(14px * var(--fs-scale)); line-height: 1.45; }
.opl * { font-family: inherit; }

/* Utility */
.opl .hairline { border: 1px solid var(--line); }
.opl .mono { font-family: var(--font-mono); }
.opl .uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.opl .tnum { font-variant-numeric: tabular-nums; }

/* Chip / badge */
.opl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(11px * var(--fs-scale)); font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  background: var(--bg-3); color: var(--ink-2);
  border: 1px solid var(--line);
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.opl-chip.accent  { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 28%, transparent); }
.opl-chip.teal    { background: color-mix(in oklab, var(--opl-teal) 14%, transparent); color: var(--opl-teal); border-color: color-mix(in oklab, var(--opl-teal) 28%, transparent); }
.opl-chip.olive   { background: color-mix(in oklab, var(--opl-olive) 18%, transparent); color: #6e6a10; border-color: color-mix(in oklab, var(--opl-olive) 36%, transparent); }
[data-theme="dark"] .opl-chip.olive { color: var(--opl-olive); }
.opl-chip.navy    { background: var(--opl-navy); color: #fff; border-color: var(--opl-navy); }
.opl-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* Buttons */
.opl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: calc(13px * var(--fs-scale)); font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink); cursor: pointer;
  transition: all .12s ease; white-space: nowrap;
}
.opl-btn:hover { border-color: var(--line-strong); background: var(--bg-3); }
.opl-btn.primary {
  background: var(--accent); color: var(--accent-on); border-color: var(--accent);
}
.opl-btn.primary:hover { filter: brightness(.94); }
.opl-btn.ghost { background: transparent; border-color: transparent; }
.opl-btn.ghost:hover { background: var(--bg-3); }
.opl-btn.navy { background: var(--opl-navy); color: #fff; border-color: var(--opl-navy); }

/* Focus */
.opl input:focus, .opl select:focus, .opl button:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
  outline-offset: 1px;
}

/* Scrollbar */
.opl ::-webkit-scrollbar { width: 10px; height: 10px; }
.opl ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid var(--bg); }
.opl ::-webkit-scrollbar-track { background: transparent; }