/* =========================================================================
   TOKENS · BLOCK B — Daniel Gold
   -------------------------------------------------------------------------
   Block A (Raster, Abstände, Typo-Skala, Mono, Bewegung, Hairline) kommt aus
   assets/shared/tokens.css und wird davor geladen. Hier nur: Farben,
   Display-/Text-Schrift, Aliase. Freigabe bruni 16.09.2026.
   ========================================================================= */

/* ------------------------------------------------------------ Schriften ---- */
/* Fraunces — SIL OFL, Undercase Type. Latin-Subset, Achsen opsz 9–144,
   SOFT 0–100, WONK 0–1; wght fest auf 500 instanziert (62 kB).
   Instrument Sans — SIL OFL. Latin-Subset, wght 400–700, wdth fest 100 (28 kB).
   Fallbacks metrisch angepasst (Georgia / Arial), damit der Swap kein Layout bewegt. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 88.2%; ascent-override: 111%; descent-override: 29%; line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 102.4%; ascent-override: 94.7%; descent-override: 24.4%; line-gap-override: 0%;
}

:root {
  /* ---- Farben: ein Grund, ein Akzent, ein zweiter Grund für die Werkstatt ---- */
  --paper:  #F7F4EF;   /* leicht warmes Weiß, führt das Fotoweiß der Freisteller weiter */
  --ink:    #141414;   /* wie die schwarze Glasur */
  --kobalt: #1E3FBF;   /* der Akzent — Kobaltglasur, als Fläche, nie als Verlauf */
  --ton:    #E3D5BD;   /* Rohton, unglasiert — nur Werkstatt-Sektion */

  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--kobalt);
  --line: #D8D2C8;     /* Hairline auf Papier */

  /* ---- Schrift ---- */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-text: "Instrument Sans", "Instrument Sans Fallback", Arial, sans-serif;
  /* Display-Achsen: weich und leicht wackelig — „wenn die Mundwinkel hochgehen" */
  --display-axes: "SOFT" 100, "WONK" 1;

  --lh-tight: 0.92;
  --lh-body: 1.5;

  color-scheme: only light;
}

/* ---- Inversion: jede Sektion erklärt ihren Grund. Alles darin nutzt currentColor. ---- */
.s--paper  { background: var(--paper);  color: var(--ink);   --bg: var(--paper);  --fg: var(--ink);   --line: #D8D2C8; }
.s--ton    { background: var(--ton);    color: var(--ink);   --bg: var(--ton);    --fg: var(--ink);   --line: #C9B99C; }
.s--ink    { background: var(--ink);    color: var(--paper); --bg: var(--ink);    --fg: var(--paper); --line: #3A3835; --accent: var(--paper); }
.s--kobalt { background: var(--kobalt); color: var(--paper); --bg: var(--kobalt); --fg: var(--paper); --line: #4A66CC; --accent: var(--paper); }