/* Kolkworks componenten
 * Vereist tokens.css. Alle waarden komen uit tokens; hier staat geen enkele losse kleur.
 * Klassen zijn bewust plat (.kw-btn, .kw-card) zodat ze naast elk framework passen.
 */

/* ---------------------------------------------------------------- basis */
*, *::before, *::after { box-sizing: border-box; }

body.kw {
  margin: 0;
  background: var(--kw-paper);
  color: var(--kw-ink);
  font-family: var(--kw-font-body);
  font-size: var(--kw-text-base);
  line-height: var(--kw-leading);
  -webkit-font-smoothing: antialiased;
}

.kw h1, .kw h2, .kw h3, .kw h4 {
  font-family: var(--kw-font-display);
  line-height: var(--kw-leading-tight);
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0;
}
.kw h1 { font-size: var(--kw-text-3xl); font-weight: 700; }
.kw h2 { font-size: var(--kw-text-2xl); font-weight: 700; }
.kw h3 { font-size: var(--kw-text-xl); font-weight: 600; }
.kw h4 { font-size: var(--kw-text-lg); font-weight: 600; }
.kw p  { margin: 0; max-width: var(--kw-measure); }
.kw a  { color: var(--kw-accent-ink); text-underline-offset: 2px; }
.kw a:hover { color: var(--kw-accent-hover); }

.kw-wrap  { max-width: var(--kw-maxwidth); margin: 0 auto; padding: var(--kw-space-6) var(--kw-space-5); }
.kw-stack { display: flex; flex-direction: column; gap: var(--kw-space-4); }
.kw-row   { display: flex; flex-wrap: wrap; gap: var(--kw-space-3); align-items: center; }
.kw-mono  { font-family: var(--kw-font-mono); font-variant-numeric: tabular-nums; }
.kw-muted { color: var(--kw-muted); }
.kw-label {
  font-family: var(--kw-font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--kw-faint);
}

:where(.kw) :focus-visible { outline: 2px solid var(--kw-accent); outline-offset: 2px; border-radius: var(--kw-radius-sm); }

/* ---------------------------------------------------------------- knop */
.kw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kw-space-2);
  font-family: var(--kw-font-body); font-size: var(--kw-text-base); font-weight: 500; line-height: 1;
  padding: 11px var(--kw-space-4);
  border: 1px solid transparent; border-radius: var(--kw-radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kw-btn-primary { background: var(--kw-accent); color: #FFFFFF; border-color: var(--kw-accent); }
.kw-btn-primary:hover { background: var(--kw-accent-hover); border-color: var(--kw-accent-hover); color: #FFFFFF; }
.kw-btn-secondary { background: var(--kw-surface); color: var(--kw-ink); border-color: var(--kw-line); }
.kw-btn-secondary:hover { background: var(--kw-raised); border-color: var(--kw-muted); color: var(--kw-ink); }
.kw-btn:disabled, .kw-btn[aria-disabled="true"], .kw-btn-disabled {
  background: var(--kw-raised); color: var(--kw-faint); border-color: var(--kw-line);
  cursor: not-allowed; pointer-events: none;
}
.kw-btn-lg { font-size: var(--kw-text-lg); padding: 13px var(--kw-space-5); }

/* ---------------------------------------------------------------- invoerveld */
.kw-field { display: flex; flex-direction: column; gap: var(--kw-space-1); max-width: 420px; }
.kw-field > label { font-size: var(--kw-text-sm); font-weight: 500; color: var(--kw-ink); }
.kw-input, .kw-select, .kw-textarea {
  font-family: var(--kw-font-body); font-size: var(--kw-text-base); color: var(--kw-ink);
  background: var(--kw-surface); border: 1px solid var(--kw-line); border-radius: var(--kw-radius-sm);
  padding: 9px var(--kw-space-3); width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kw-input::placeholder, .kw-textarea::placeholder { color: var(--kw-faint); }
.kw-input:focus, .kw-select:focus, .kw-textarea:focus {
  outline: none; border-color: var(--kw-accent); box-shadow: var(--kw-focus);
}
.kw-input:disabled, .kw-select:disabled, .kw-textarea:disabled {
  background: var(--kw-raised); color: var(--kw-faint); cursor: not-allowed;
}
.kw-input[aria-invalid="true"] { border-color: var(--kw-error); }
.kw-hint  { font-size: var(--kw-text-xs); color: var(--kw-muted); }
.kw-error-text { font-size: var(--kw-text-xs); color: var(--kw-error); }

/* ---------------------------------------------------------------- kaart */
.kw-card {
  background: var(--kw-surface); border: 1px solid var(--kw-line); border-radius: var(--kw-radius);
  padding: var(--kw-space-5); box-shadow: var(--kw-shadow-sm);
  display: flex; flex-direction: column; gap: var(--kw-space-3);
}
.kw-card-raised { box-shadow: var(--kw-shadow); }
.kw-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kw-space-3); }
.kw-price { font-family: var(--kw-font-display); font-size: var(--kw-text-2xl); font-weight: 700; }
.kw-price small { font-size: var(--kw-text-sm); font-weight: 500; color: var(--kw-muted); }

/* ---------------------------------------------------------------- tabel */
.kw-table-wrap { overflow-x: auto; border: 1px solid var(--kw-line); border-radius: var(--kw-radius); }
.kw-table { width: 100%; border-collapse: collapse; font-size: var(--kw-text-sm); background: var(--kw-surface); }
.kw-table th, .kw-table td { padding: 10px var(--kw-space-4); text-align: left; border-bottom: 1px solid var(--kw-line-soft); }
.kw-table thead th {
  background: var(--kw-raised); color: var(--kw-muted); font-family: var(--kw-font-mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500;
}
.kw-table tbody tr:last-child td { border-bottom: 0; }
.kw-table td.kw-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- melding */
.kw-note {
  display: flex; gap: var(--kw-space-3); align-items: flex-start;
  padding: var(--kw-space-3) var(--kw-space-4); border-radius: var(--kw-radius-sm);
  border: 1px solid var(--kw-line); background: var(--kw-raised); font-size: var(--kw-text-sm);
  border-left-width: 3px;
}
.kw-note-icon { font-family: var(--kw-font-mono); font-weight: 600; line-height: 1.5; }
.kw-note-info    { background: var(--kw-accent-soft); border-color: var(--kw-line); border-left-color: var(--kw-accent); }
.kw-note-ok      { background: var(--kw-ok-soft);     border-color: var(--kw-line); border-left-color: var(--kw-ok); }
.kw-note-warn    { background: var(--kw-warn-soft);   border-color: var(--kw-line); border-left-color: var(--kw-warn); }
.kw-note-error   { background: var(--kw-error-soft);  border-color: var(--kw-line); border-left-color: var(--kw-error); }
.kw-note-info .kw-note-icon  { color: var(--kw-accent-ink); }
.kw-note-ok .kw-note-icon    { color: var(--kw-ok); }
.kw-note-warn .kw-note-icon  { color: var(--kw-warn); }
.kw-note-error .kw-note-icon { color: var(--kw-error); }

/* De AI-melding is een melding met een vaste tekst; zie shared/legal/AI-TRANSPARANTIE.md */
.kw-ai-notice { font-size: var(--kw-text-xs); color: var(--kw-muted); }

/* ---------------------------------------------------------------- badge */
.kw-badge {
  display: inline-flex; align-items: center; gap: var(--kw-space-1);
  font-family: var(--kw-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: var(--kw-radius-sm); background: var(--kw-raised); color: var(--kw-muted);
}
.kw-badge-ok   { background: var(--kw-ok-soft);   color: var(--kw-ok); }
.kw-badge-warn { background: var(--kw-warn-soft); color: var(--kw-warn); }
.kw-badge-info { background: var(--kw-accent-soft); color: var(--kw-accent-ink); }

/* ---------------------------------------------------------------- footer */
.kw-footer {
  border-top: 1px solid var(--kw-line); margin-top: var(--kw-space-7);
  padding: var(--kw-space-5) 0; font-size: var(--kw-text-xs); color: var(--kw-muted);
  display: flex; flex-wrap: wrap; gap: var(--kw-space-2) var(--kw-space-5); align-items: center;
}
.kw-footer nav { display: flex; flex-wrap: wrap; gap: var(--kw-space-2) var(--kw-space-4); }
.kw-footer a { color: var(--kw-muted); }
.kw-footer a:hover { color: var(--kw-ink); }
.kw-footer .kw-brand { font-family: var(--kw-font-display); font-weight: 600; color: var(--kw-ink); }

@media (prefers-reduced-motion: reduce) {
  .kw-btn, .kw-input, .kw-select, .kw-textarea { transition: none; }
}