/* Gedeelde tokens — AAAFRESH123 (kunst) + Fotonen delen dezelfde inkt.
   27-09-2026: opgezet voor Jourdain-raamwerk herbouw (atelier ipv webshop). */

/* 01-10-2026: fontpakket van Sergio — IBM Plex Mono / Space Mono /
   Courier Prime, lokaal gehost (fonts/, ~128 KB latin-subset). Vervangt de
   Google-Fonts-import van 30-09: geen externe request meer, en Playfair en
   Space Grotesk zijn eruit. Alles is nu monospace. */
@import url('./fonts/fonts.css');

:root {
  --void: #050505;
  --papier: #f4f1ea;
  --inkt-r: rgb(255, 42, 48);
  --inkt-y: rgb(255, 214, 48);
  --inkt-b: rgb(60, 120, 255);
  /* 01-10-2026: teal van het fysieke bord en de sculptuur, gesampled uit de
     foto (#008478). Draagt "123" in het woordmerk en bindt dat aan het
     lopende poppetje. Contrast op --void is 4,44:1 — genoeg voor grote tekst. */
  --inkt-t: #008478;

  --ink-text: #e8e5df;      /* body-tekst op void */
  --ink-text-dim: #8a8680;  /* meta-tekst, minder prominent */
  --line: rgba(232, 229, 223, 0.14); /* 1px chrome-lijnen */

  --radius: 0;

  /* Rolverdeling uit het fontpakket: body = IBM Plex Mono, koppen = Space
     Mono bold, accenten en knoppen = Courier Prime bold. */
  --font-display: 'Space Mono', ui-monospace, monospace;   /* koppen */
  --font-ui: 'IBM Plex Mono', ui-monospace, monospace;     /* body */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;   /* feiten, labels */
  --font-accent: 'Courier Prime', ui-monospace, monospace; /* accent, knoppen */

  /* Schaal teruggebracht t.o.v. 30-09: monospace is veel breder dan een
     serif, dus dezelfde px-maat loopt twee keer zo ver door. */
  --step-hero: clamp(2rem, 5vw, 4rem);
  --step-xl: clamp(1.5rem, 3vw, 2.4rem);
  --step-l: clamp(1.1rem, 1.8vw, 1.5rem);
  --micro: 0.68rem; /* mono-labels: maat, jaar, status */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--ink-text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em; /* Space Mono loopt breed; iets intrekken */
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--font-ui); border-radius: var(--radius); cursor: pointer; }
img { display: block; max-width: 100%; }

/* Meta-tekst: schilder · jaar · maat · prijs — smal, tabulaire cijfers */
.meta {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--ink-text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Eén filled knop per pagina maximaal — zwart of inkt-rood, nooit oranje */
.btn-fill {
  display: inline-block;
  padding: 0.9rem 2rem;
  background: var(--inkt-r);
  color: var(--void);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: none;
}
.btn-fill:hover { background: #ff5a5f; }

.btn-ghost {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  background: transparent;
  color: var(--ink-text);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--ink-text); }

.link-underline {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.link-underline:hover { border-color: currentColor; }