/* ==========================================================================
   Schriften — beide als Kopie im Projekt, nichts wird nachgeladen.

   Oberfläche:  Google Sans Flex (Google, SIL OFL 1.1)
   Code/Mono:   Geist Mono       (Vercel, SIL OFL 1.1)

   Wie bei den Icons (js/icons.js) stellt die App zur Laufzeit keine fremde
   Anfrage: kein Google Fonts, keine IP-Adresse eines Nutzers, die den
   eigenen Server verlässt. Lizenztexte in assets/fonts/OFL-GoogleSansFlex.txt
   und OFL-Geist.txt — die OFL verlangt, dass sie bei Weitergabe beiliegen.

   Herkunft, für spätere Aktualisierungen:
     Google Sans Flex  @fontsource-variable/google-sans-flex@5.3.2,
                       Fassung „wght" (Latin bereits subsettet)
     Geist Mono        github.com/vercel/geist-font, Commit 10dc765

   Seit 2026-10-16 Google Sans Flex statt DM Sans. Die Schrift hat viele
   Achsen (wght, wdth, opsz, slnt, GRAD, ROND); geladen wird nur wght
   (1–1000) — die volle Fassung wöge 1,4 MB statt 50 KB. Kursives aus
   Markdown rechnet der Browser deshalb als Schrägstellung.

   Je Schnitt stehen zwei Regeln: Latin und Latin Extended, getrennt über
   unicode-range. Umlaute und ß liegen in Latin — die zweite Datei holt der
   Browser nur, wenn wirklich ein Zeichen daraus vorkommt (polnische oder
   tschechische Namen etwa). Die Bereiche stammen unverändert aus wght.css
   von Fontsource.

   font-display: swap zeigt sofort die Ersatzschrift und tauscht, sobald
   die Schrift da ist. Damit das meist vor dem ersten Paint passiert, steht
   in jeder Seite ein <link rel="preload"> auf die Latin-Datei.
   ========================================================================== */

@font-face {
  font-family: "Google Sans Flex";
  src: url("../assets/fonts/GoogleSansFlex-Variable-latin.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Google Sans Flex";
  src: url("../assets/fonts/GoogleSansFlex-Variable-latin-ext.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Kursiv braucht die Mono nicht, im Mono-Kontext steht hier nirgends
   Kursives. */
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   shadcn/ui Design-Tokens (Basisfarbe "gray", oklch)
   Die Grautöne sind Tailwinds Skala „gray" — kühl, leicht bläulich —, je
   Token mit der Stufe im Kommentar. Seit 2026-10-16; vorher "neutral".

   Einzige Ausnahme ist das Schwarz: Wo shadcn gray-950 bzw. gray-900
   setzt, steht hier echtes Schwarz oklch(0 0 0) — hell für Text,
   primären Knopf und die Schrift auf --secondary/--accent, dunkel für den
   Grund und die Schrift auf dem primären Knopf. Das Logo ist schwarz, und
   Text daneben wirkte grau. Siehe DESIGN.md, Farben.
   ========================================================================== */

:root {
  --radius: 0.75rem;   /* 12 px; bis 2026-10-16 10 px (shadcn) */

  --background: oklch(1 0 0);
  --foreground: oklch(0 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0 0 0);
  --primary: oklch(0 0 0);
  --primary-foreground: oklch(0.985 0.002 247.839);   /* gray-50 */
  --secondary: oklch(0.967 0.003 264.542);            /* gray-100 */
  --secondary-foreground: oklch(0 0 0);
  --muted: oklch(0.967 0.003 264.542);                /* gray-100 */
  --muted-foreground: oklch(0.551 0.027 264.364);     /* gray-500 */
  --accent: oklch(0.967 0.003 264.542);               /* gray-100 */
  --accent-foreground: oklch(0 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0.002 247.839);
  --warning: oklch(0.646 0.161 73.4);
  --warning-foreground: oklch(0.42 0.12 73.4);
  --border: oklch(0.928 0.006 264.531);               /* gray-200 */
  --input: oklch(0.928 0.006 264.531);                /* gray-200 */
  --ring: oklch(0.707 0.022 261.325);                 /* gray-400 */

  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0 0 0);
  --sidebar-border: oklch(0.928 0.006 264.531);       /* gray-200 */

  /* Die Marketingkarte (.lib-hero): hellgraue Fläche ohne Rand. Auf ihr
     rücken --muted/--secondary und --accent je eine Stufe dunkler, sonst
     verschwänden Knöpfe und Schienen im gleichen Grau.
     Siehe DESIGN.md, „Karten und Flächen". */
  --surface: oklch(0.967 0.003 264.542);              /* gray-100 */
  --surface-muted: oklch(0.928 0.006 264.531);        /* gray-200 */
  --surface-accent: oklch(0.928 0.006 264.531);       /* gray-200 */

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);

  --font-sans: "Google Sans Flex", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono",
    Menlo, Consolas, "Liberation Mono", monospace;
}

.dark {
  --background: oklch(0 0 0);
  --foreground: oklch(0.985 0.002 247.839);           /* gray-50 */
  --card: oklch(0.21 0.034 264.665);                  /* gray-900 */
  --card-foreground: oklch(0.985 0.002 247.839);
  --popover: oklch(0.21 0.034 264.665);               /* gray-900 */
  --popover-foreground: oklch(0.985 0.002 247.839);
  --primary: oklch(0.928 0.006 264.531);              /* gray-200 */
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.278 0.033 256.848);            /* gray-800 */
  --secondary-foreground: oklch(0.985 0.002 247.839);
  --muted: oklch(0.278 0.033 256.848);                /* gray-800 */
  --muted-foreground: oklch(0.707 0.022 261.325);     /* gray-400 */
  --accent: oklch(0.373 0.034 259.733);               /* gray-700 */
  --accent-foreground: oklch(0.985 0.002 247.839);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0.002 247.839);
  --warning: oklch(0.769 0.144 73.4);
  --warning-foreground: oklch(0.879 0.089 73.4);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);                 /* gray-500 */

  --sidebar: oklch(0.21 0.034 264.665);               /* gray-900 */
  --sidebar-foreground: oklch(0.985 0.002 247.839);
  --sidebar-border: oklch(1 0 0 / 10%);

  /* Dunkel dieselben Stufen wie --card, --muted und --accent. */
  --surface: oklch(0.21 0.034 264.665);               /* gray-900 */
  --surface-muted: oklch(0.278 0.033 256.848);        /* gray-800 */
  --surface-accent: oklch(0.373 0.034 259.733);       /* gray-700 */

  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.4), 0 4px 6px -4px oklch(0 0 0 / 0.4);
}

/* Fallback für Browser ohne oklch() (z. B. sehr alte Safari-Versionen). */
@supports not (color: oklch(0 0 0)) {
  :root {
    --background: #ffffff; --foreground: #000000;
    --card: #ffffff; --card-foreground: #000000;
    --popover: #ffffff; --popover-foreground: #000000;
    --primary: #000000; --primary-foreground: #f9fafb;
    --secondary: #f3f4f6; --secondary-foreground: #000000;
    --muted: #f3f4f6; --muted-foreground: #6b7280;
    --accent: #f3f4f6; --accent-foreground: #000000;
    --destructive: #e7000b; --destructive-foreground: #f9fafb;
    --warning: #d08700; --warning-foreground: #894b00;
    --border: #e5e7eb; --input: #e5e7eb; --ring: #9ca3af;
    --sidebar: #ffffff; --sidebar-foreground: #000000;
    --sidebar-border: #e5e7eb;
    --surface: #f3f4f6; --surface-muted: #e5e7eb; --surface-accent: #e5e7eb;
  }
  .dark {
    --background: #000000; --foreground: #f9fafb;
    --card: #111827; --card-foreground: #f9fafb;
    --popover: #111827; --popover-foreground: #f9fafb;
    --primary: #e5e7eb; --primary-foreground: #000000;
    --secondary: #1f2937; --secondary-foreground: #f9fafb;
    --muted: #1f2937; --muted-foreground: #9ca3af;
    --accent: #374151; --accent-foreground: #f9fafb;
    --destructive: #ff6467; --destructive-foreground: #f9fafb;
    --warning: #ffb900; --warning-foreground: #ffd48a;
    --border: rgba(255, 255, 255, 0.1); --input: rgba(255, 255, 255, 0.15);
    --ring: #6b7280;
    --sidebar: #111827; --sidebar-foreground: #f9fafb;
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --surface: #111827; --surface-muted: #1f2937; --surface-accent: #374151;
  }
}