/* Yamako tokens, gegenereerd uit tokens.json. Wijzig de bron, niet dit bestand. */

:root {
  --yk-color-surface: #ffffff;
  --yk-color-ink: #4a4a4d;
  --yk-color-body: #5a5a5d;
  --yk-color-muted: #a7a9a7;
  --yk-color-line: #e7e8e7;
  --yk-color-signature: #f5e994;
  --yk-color-signature-mark: #f6ea93;
  --yk-color-signature-ink: #c2a23a;
  --yk-color-sage: #4f7a5e;
  --yk-color-blue-soft: #6f9fc4;
  --yk-color-rose-muted: #c98a8a;

  --yk-status-done: var(--yk-color-sage);
  --yk-status-attention: var(--yk-color-blue-soft);
  --yk-status-error: var(--yk-color-rose-muted);

  --yk-font-title: Inter, sans-serif;
  --yk-font-body: Inter, sans-serif;
  --yk-font-serif: 'Libre Baskerville', serif;
  --yk-font-mono: 'JetBrains Mono', monospace;

  --yk-weight-regular: 400;
  --yk-weight-medium: 500;

  --yk-size-base: 15px;
  --yk-size-label: 10.5px;
  --yk-size-h1: 30px;
  --yk-size-subtitle-max: 26px;

  --yk-line-body: 1.65;
  --yk-line-title: 1.2;

  --yk-radius-sm: 4px;
  --yk-radius-md: 10px;
  --yk-radius-lg: 16px;

  --yk-mark-start: 52%;
  --yk-mark-pad-x: 0.08em;

  --yk-wrap-max: 820px;

  /* Per project overschrijfbaar: het accent naast het geel (salie, rose, blauw). */
  --yk-accent: var(--yk-color-sage);
}

/* Basis */
body.yk {
  background: var(--yk-color-surface);
  color: var(--yk-color-body);
  font-family: var(--yk-font-body);
  font-size: var(--yk-size-base);
  line-height: var(--yk-line-body);
  -webkit-font-smoothing: antialiased;
}

.yk h1 {
  font-family: var(--yk-font-title);
  font-size: var(--yk-size-h1);
  font-weight: var(--yk-weight-medium);
  line-height: var(--yk-line-title);
  color: var(--yk-color-ink);
  letter-spacing: -0.01em;
}

/* Sub-titels mogen serif tot circa 26px */
.yk-subtitle {
  font-family: var(--yk-font-serif);
  font-weight: var(--yk-weight-regular);
  color: var(--yk-color-ink);
  line-height: 1.35;
}

.yk-label {
  font-family: var(--yk-font-mono);
  font-size: var(--yk-size-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yk-color-muted);
}

/* Markeerstift-signature. Hele titel, hoogte van de letters steekt erbovenuit,
   geen horizontale verschuiving (padding gecompenseerd met negatieve marge). */
.yk-mark {
  background-image: linear-gradient(transparent var(--yk-mark-start), var(--yk-color-signature-mark) var(--yk-mark-start));
  padding: 0 var(--yk-mark-pad-x);
  margin: 0 calc(-1 * var(--yk-mark-pad-x));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Markering uit, zonder dat de rest van de stijl verandert (klant-modus) */
.yk-no-mark .yk-mark {
  background-image: none;
}

/* Statuspill */
.yk-pill {
  display: inline-block;
  font-family: var(--yk-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--yk-radius-sm);
  padding: 2px 7px;
  color: var(--yk-color-signature-ink);
  background: color-mix(in srgb, var(--yk-color-signature) 35%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--yk-color-signature) 55%, #ffffff);
}
