/* Masu Design-Tokens – Farben aus dem Gemälde in references/ (Weißabgleich über die weiße Wand),
   siehe docs/DESIGN.md. Farbwerte werden von tests/test_design_tokens.py auf WCAG-Kontrast geprüft. */
@font-face {
  /* Damion (SIL Open Font License, static/fonts/Damion-OFL.txt), selbst ausgeliefert */
  font-family: "Masu Brush";
  src: url("../fonts/Damion-Regular.c77b46f08e14.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Hauptfläche: Burgunder aus den Pinselstrichen (Design B, freigegeben 2026-09-14) */
  --burgundy: #4F121F;
  --burgundy-deep: #360B15;
  --on-color: #FFFFFF;
  /* Akzent: Ocker. #806A23 trägt weiße Schrift (≥ 4,5:1), #C9A34E leuchtet auf Burgunder */
  --ochre: #806A23;
  --ochre-deep: #6E5A1B;
  --ochre-bright: #C9A34E;
  --ochre-light: #8C7426; /* Referenzton, nur für Flächen und Pinselstriche */
  /* Hintergrund der Inhalte: Beige der Leinwand, ohne Muster */
  --canvas: #E8DAC2;
  --surface: #FAF4E9;
  --ink: #2B2423;
  --muted: #5F574F;
  --slate: #4D5E64;
  --olive: #8B8123;
  /* Dezentes Grün für den Forschungspfad (nur „hierzu gibt es Forschung“) */
  --sage: #4F6E4A;
  --sage-light: #DCE6D3;
  --mist: #C8D5D8;
  --line: #DCCDB3;
  --line-strong: #857A68;
  --rose: #A5566B; /* nur dekorativ in Pinselstrichen, nie für Text */

  --focus: var(--burgundy);

  --font-sans: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", ui-sans-serif, system-ui,
    -apple-system, sans-serif;
  /* Handschrift nur für den Markenschriftzug und kurze Akzente */
  --font-brush: "Masu Brush", "Snell Roundhand", "Segoe Script", cursive;
  --text-body: 1rem;
  --text-lead: 1.0625rem;
  --text-meta: 0.875rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --radius-card: 24px;
  --radius-field: 14px;
  --radius-pill: 999px;

  --shell-max: 30rem;
  --nav-height: 4rem;
  --ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Ab hier genug Breite für mehr als eine Spalte (Design B, „Desktop sinnvoll nutzen“). */
@media (min-width: 56rem) {
  :root { --shell-max: 46rem; }
}