/*
 * THEME Vor Mitternacht: Tokens aus brand/project/tokens.json als CSS-Variablen.
 * Einzige Stelle für Farben, Schriften, Abstände und Radien der Website.
 * Hell = "Papier", dunkel = "Nachtlauf" (automatisch per prefers-color-scheme).
 * Schriften sind selbst gehostet (public/fonts), kein Google-CDN.
 * E-Mails können keine CSS-Variablen; deren Farben stehen in src/brand.ts (emailColors).
 */

@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* Farbe: Papier (hell) */
  --papier: #F4F4F1;
  --papier-raised: #FFFFFF;
  --asphalt: #2E302E;
  --linie: #D9D9D3;
  --teer: #191A19;
  --teer-muted: #5A5C57;
  --kreide: #F4F4F1;
  --markierung: #FF2D6F;
  --markierung-text: #C4104C;
  --on-markierung: #191A19;
  --markierung-soft: #FFE0EA;
  --feld: #4E6138;
  --feld-soft: #E3E9DA;
  --fokus: var(--markierung-text);

  /* Schrift */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: "Barlow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Abstände (8er-Raster) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radien */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-loch: 9999px;

  --content-width: 880px;
}

/* Farbe: Nachtlauf (dunkel) */
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #191A19;
    --papier-raised: #232523;
    --linie: #3A3C39;
    --teer: #F4F4F1;
    --teer-muted: #A9AAA4;
    --markierung-text: #FF5C8F;
    --markierung-soft: #3D1622;
    --feld: #9DB27F;
    --feld-soft: #222A1A;
  }
}