/* Zentrale Design-Datei von Folio.
   Alle Farben, Schriften, Rundungen, Schatten und Bewegungen stehen hier und nur hier.
   Der übrige Code (globals.css, Komponenten, Übersichten) verwendet ausschließlich diese Werte.

   Design „Salbei“ (Standard): ruhiges Salbeigrün, weiche Formen, Glas in der Seitenleiste.
   Weitere Designs (Tinte, Bernstein, Graphit, Pflaume) stehen unten; sie gelten über data-design
   auf <html> (Cookie „design“, src/lib/design.ts) und überschreiben nur Werte, nie Regeln.
   Hell/Dunkel: Die Seite folgt der Systemeinstellung; data-theme auf <html> überschreibt sie.
   Die Datei liegt in public, damit Website und Übersichten (im Vorschaufenster) dieselbe Quelle laden:
   die Website über src/app/layout.tsx, die Übersichten über src/lib/preview.ts.
   Schriften kommen von der eigenen Domain (public/fonts, Lizenz SIL OFL), nie von Google. */

/* Salbei */
@font-face { font-family: "Manrope"; src: url(/fonts/manrope-latin-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Tinte */
@font-face { font-family: "Sora Display"; src: url(/fonts/sora-latin-wght-normal.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; size-adjust: 86%; }
@font-face { font-family: "Onest"; src: url(/fonts/onest-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
/* Bernstein */
@font-face { font-family: "Bricolage Display"; src: url(/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; size-adjust: 88%; }
@font-face { font-family: "Hanken Grotesk"; src: url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/fonts/dm-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/fonts/dm-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500 900; font-style: normal; font-display: swap; }
/* Graphit */
@font-face { font-family: "Geist Display"; src: url(/fonts/geist-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; size-adjust: 88%; }
@font-face { font-family: "Geist"; src: url(/fonts/geist-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Pflaume */
@font-face { font-family: "Newsreader Display"; src: url(/fonts/newsreader-latin-opsz-normal.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; size-adjust: 96%; }
@font-face { font-family: "Newsreader Display"; src: url(/fonts/newsreader-latin-opsz-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; size-adjust: 96%; }
@font-face { font-family: "Plus Jakarta Sans"; src: url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url(/fonts/fragment-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
/* Ersatzschriften mit denselben Maßen: Bis die eigene Schrift geladen ist, springt nichts (etwa das Logo). */
@font-face { font-family: "Manrope Ersatz"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 99.35%; ascent-override: 107.30%; descent-override: 30.20%; line-gap-override: 0.00%; }
@font-face { font-family: "Instrument Serif Ersatz"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"); size-adjust: 83.55%; ascent-override: 118.49%; descent-override: 37.10%; line-gap-override: 0.00%; }
@font-face { font-family: "Geist Mono Ersatz"; src: local("Courier New"), local("Courier"), local("Liberation Mono"); size-adjust: 99.98%; ascent-override: 100.52%; descent-override: 29.50%; line-gap-override: 0.00%; }
@font-face { font-family: "Sora Display Ersatz"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 97.94%; ascent-override: 99.05%; descent-override: 29.62%; line-gap-override: 0.00%; }
@font-face { font-family: "Onest Ersatz"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 105.19%; ascent-override: 92.21%; descent-override: 28.99%; line-gap-override: 0.00%; }
@font-face { font-family: "JetBrains Mono Ersatz"; src: local("Courier New"), local("Courier"), local("Liberation Mono"); size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 30.00%; line-gap-override: 0.00%; }
@font-face { font-family: "Bricolage Display Ersatz"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 88.26%; ascent-override: 105.38%; descent-override: 30.59%; line-gap-override: 0.00%; }
@font-face { font-family: "Hanken Grotesk Ersatz"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 101.23%; ascent-override: 98.78%; descent-override: 29.93%; line-gap-override: 0.00%; }
@font-face { font-family: "DM Mono Ersatz"; src: local("Courier New"), local("Courier"), local("Liberation Mono"); size-adjust: 99.98%; ascent-override: 99.22%; descent-override: 31.01%; line-gap-override: 0.00%; }
@font-face { font-family: "Geist Display Ersatz"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 92.70%; ascent-override: 108.41%; descent-override: 31.82%; line-gap-override: 0.00%; }
@font-face { font-family: "Geist Ersatz"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 105.34%; ascent-override: 95.40%; descent-override: 28.00%; line-gap-override: 0.00%; }
@font-face { font-family: "Newsreader Display Ersatz"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"); size-adjust: 96.94%; ascent-override: 75.82%; descent-override: 27.33%; line-gap-override: 0.00%; }
@font-face { font-family: "Plus Jakarta Sans Ersatz"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 104.72%; ascent-override: 99.12%; descent-override: 21.20%; line-gap-override: 0.00%; }
@font-face { font-family: "Fragment Mono Ersatz"; src: local("Courier New"), local("Courier"), local("Liberation Mono"); size-adjust: 102.98%; ascent-override: 92.25%; descent-override: 24.28%; line-gap-override: 0.00%; }

:root {
  --bg: #f1f4ef;
  --surface: #fbfcfa;
  --sunk: #e7ede6;
  --line: #d9e1da;
  --fg: #1b2420;
  --muted: #5d6b64;
  --ink: #2f7d5b;
  --ink-soft: #e1efe6;
  --on-ink: #ffffff;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --ok: #2f7d5b;
  --ok-soft: #e1efe6;
  --shadow: 0 18px 44px -22px rgba(40, 70, 55, 0.45), 0 2px 8px -4px rgba(40, 70, 55, 0.12);
  --glass: rgba(247, 250, 245, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.78);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --glow-1: rgba(191, 227, 201, 0.75);
  --glow-2: rgba(243, 226, 184, 0.6);
  --glow-3: rgba(199, 223, 240, 0.55);
  --display: "Instrument Serif", "Instrument Serif Ersatz", "New York", Georgia, serif;
  --body: "Manrope", "Manrope Ersatz", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "Geist Mono Ersatz", ui-monospace, "SF Mono", Menlo, monospace;
  --sidebar: 288px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 22px;
  /* Überschriften: Schriftgewicht, Laufweite und Stil der Betonung (h1 em) */
  --display-weight: 400;
  --display-tracking: -0.01em;
  --display-em: italic;
  --display-em-color: var(--ink);
  /* Verlauf über der Akzentfarbe bei Hauptknöpfen, Logo und gewählter Vorlesung (none = einfarbig) */
  --ink-grad: none;
  /* Strichstärke der kleinen Symbole in der Seitenleiste */
  --icon-stroke: 1.3;
  /* Knöpfe: 999px = Pille */
  --btn-radius: 999px;
  /* Tönung für Schatten und Linien (RGB-Kanäle, Verwendung: rgb(var(--tint) / 0.4)) */
  --tint: 40 70 55;
  --tint-deep: 20 40 30;
  --tint-mid: 40 60 50;
  /* Abdunkeln hinter Dialogen */
  --scrim: rgba(14, 22, 18, 0.32);
  --scrim-strong: rgba(10, 15, 25, 0.42);
  /* Auf weißem PDF-Papier: Akzent für Treffer und Auswahl, bleibt im Dunkelmodus gleich */
  --ink-paper: 47 125 91;
  --paper: #ffffff;
  --paper-empty: #f1f3f1;
  /* Apples Federkurve: schnell los, weich aus */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* Farben für Inhalte der Übersichten (Tatbestand rot, Rechtsfolge blau, Hinweis gelb) */
  --ton-rot: #b3261e;
  --ton-rot-soft: #fbe9e7;
  --ton-blau: #2c6a9c;
  --ton-blau-soft: #e3eef7;
  --ton-gelb: #9a5b00;
  --ton-gelb-soft: #fbf0dc;
  /* Kalender: Klausur rot, Probeklausur grün, Abgabe blau, sonstige Termine grau */
  --kal-klausur: #d1453b;
  --kal-probe: #2e9a5c;
  --kal-abgabe: #3474d4;
  --kal-termin: #7a8a82;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1311;
    --surface: #161d1a;
    --sunk: #1d2622;
    --line: #29342f;
    --fg: #e6ece8;
    --muted: #93a39b;
    --ink: #6fcf9f;
    --ink-soft: #1c3027;
    --on-ink: #0b1a12;
    --danger: #ef8a80;
    --danger-soft: #3a2224;
    --ok: #7fd09a;
    --ok-soft: #1c3027;
    --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
    --glass: rgba(23, 31, 27, 0.62);
    --glass-edge: rgba(255, 255, 255, 0.08);
    --glass-hi: rgba(255, 255, 255, 0.1);
    --glow-1: rgba(31, 90, 62, 0.45);
    --glow-2: rgba(90, 74, 31, 0.3);
    --glow-3: rgba(31, 63, 90, 0.35);
    --ton-rot: #ef8a80;
    --ton-rot-soft: #3a2224;
    --ton-blau: #8ab8e0;
    --ton-blau-soft: #1d2b38;
    --ton-gelb: #e8b25c;
    --ton-gelb-soft: #3a2f1c;
    --kal-klausur: #f0786f;
    --kal-probe: #63cf8e;
    --kal-abgabe: #78a6f2;
    --kal-termin: #9aaaa2;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0e1311;
  --surface: #161d1a;
  --sunk: #1d2622;
  --line: #29342f;
  --fg: #e6ece8;
  --muted: #93a39b;
  --ink: #6fcf9f;
  --ink-soft: #1c3027;
  --on-ink: #0b1a12;
  --danger: #ef8a80;
  --danger-soft: #3a2224;
  --ok: #7fd09a;
  --ok-soft: #1c3027;
  --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
  --glass: rgba(23, 31, 27, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --glass-hi: rgba(255, 255, 255, 0.1);
  --glow-1: rgba(31, 90, 62, 0.45);
  --glow-2: rgba(90, 74, 31, 0.3);
  --glow-3: rgba(31, 63, 90, 0.35);
  --ton-rot: #ef8a80;
  --ton-rot-soft: #3a2224;
  --ton-blau: #8ab8e0;
  --ton-blau-soft: #1d2b38;
  --ton-gelb: #e8b25c;
  --ton-gelb-soft: #3a2f1c;
  --kal-klausur: #f0786f;
  --kal-probe: #63cf8e;
  --kal-abgabe: #78a6f2;
  --kal-termin: #9aaaa2;
  color-scheme: dark;
}

/* ---------- Weitere Designs ----------
   Gewählt über data-design auf <html> (Cookie „design“, src/lib/design.ts). Jedes Design setzt alle
   Farben für hell und dunkel; Inhaltsfarben (--ton-*, --kal-*) und Bewegungen gelten für alle. */

/* Tinte: Kobaltblau mit Verlauf ins Violett, geometrische Grotesk */
:root[data-design="tinte"] {
  --display-weight: 600;
  --display-tracking: -0.035em;
  --display-em: normal;
  --display-em-color: var(--ink);
  --btn-radius: 12px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 22px;
  --icon-stroke: 1.4;
  --display: "Sora Display", "Sora Display Ersatz", -apple-system, sans-serif;
  --body: "Onest", "Onest Ersatz", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Ersatz", ui-monospace, Menlo, monospace;
  --bg: #f3f5fb;
  --surface: #ffffff;
  --sunk: #e9edf7;
  --line: #dbe1ef;
  --fg: #0f1424;
  --muted: #5a6380;
  --ink: #3355f0;
  --ink-soft: #e6ebff;
  --on-ink: #ffffff;
  --ink-grad: linear-gradient(135deg, #3d5cff 0%, #6a4dff 100%);
  --ok: #2e8a57;
  --ok-soft: #e2f2e8;
  --glass: rgba(246, 248, 253, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-hi: rgba(255, 255, 255, 0.92);
  --glow-1: rgba(150, 172, 255, 0.55);
  --glow-2: rgba(190, 160, 255, 0.38);
  --glow-3: rgba(150, 215, 255, 0.4);
  --tint: 40 55 120;
  --tint-deep: 15 25 70;
  --tint-mid: 40 50 100;
  --shadow: 0 18px 44px -22px rgba(40, 55, 120, 0.42), 0 2px 8px -4px rgba(40, 55, 120, 0.12);
  --scrim: rgba(10, 14, 30, 0.32);
  --ink-paper: 51 85 240;
  --paper-empty: #f0f2f8;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="tinte"]:not([data-theme="light"]) {
    --bg: #090c16;
    --surface: #11152a;
    --sunk: #181d36;
    --line: #252b48;
    --fg: #e8ebf7;
    --muted: #939bbb;
    --ink: #8ea2ff;
    --ink-soft: #1d2348;
    --on-ink: #0a0e2a;
    --ink-grad: linear-gradient(135deg, #9aacff 0%, #b39bff 100%);
    --ok: #7fd09a;
    --ok-soft: #1b3026;
    --glass: rgba(17, 21, 42, 0.62);
    --glass-edge: rgba(255, 255, 255, 0.08);
    --glass-hi: rgba(255, 255, 255, 0.1);
    --glow-1: rgba(61, 92, 255, 0.34);
    --glow-2: rgba(106, 77, 255, 0.26);
    --glow-3: rgba(30, 120, 200, 0.24);
    --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
  }
}
:root[data-design="tinte"][data-theme="dark"] {
  --bg: #090c16;
  --surface: #11152a;
  --sunk: #181d36;
  --line: #252b48;
  --fg: #e8ebf7;
  --muted: #939bbb;
  --ink: #8ea2ff;
  --ink-soft: #1d2348;
  --on-ink: #0a0e2a;
  --ink-grad: linear-gradient(135deg, #9aacff 0%, #b39bff 100%);
  --ok: #7fd09a;
  --ok-soft: #1b3026;
  --glass: rgba(17, 21, 42, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --glass-hi: rgba(255, 255, 255, 0.1);
  --glow-1: rgba(61, 92, 255, 0.34);
  --glow-2: rgba(106, 77, 255, 0.26);
  --glow-3: rgba(30, 120, 200, 0.24);
  --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
}

/* Bernstein: warmes Honiggelb, kräftige Grotesk */
:root[data-design="bernstein"] {
  --display-weight: 700;
  --display-tracking: -0.035em;
  --display-em: normal;
  --display-em-color: var(--ink);
  --btn-radius: 999px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 26px;
  --icon-stroke: 1.4;
  --display: "Bricolage Display", "Bricolage Display Ersatz", -apple-system, sans-serif;
  --body: "Hanken Grotesk", "Hanken Grotesk Ersatz", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "DM Mono", "DM Mono Ersatz", ui-monospace, Menlo, monospace;
  --bg: #f4f1ec;
  --surface: #fffdf9;
  --sunk: #ece6dc;
  --line: #e1d9cc;
  --fg: #2a2118;
  --muted: #76695a;
  --ink: #a85d05;
  --ink-soft: #f8ead4;
  --on-ink: #ffffff;
  --ok: #2e8a57;
  --ok-soft: #e2f2e8;
  --glass: rgba(250, 246, 239, 0.64);
  --glass-edge: rgba(255, 255, 255, 0.8);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --glow-1: rgba(250, 210, 140, 0.6);
  --glow-2: rgba(245, 186, 168, 0.42);
  --glow-3: rgba(232, 222, 176, 0.5);
  --tint: 110 70 20;
  --tint-deep: 60 35 5;
  --tint-mid: 90 60 25;
  --shadow: 0 18px 44px -22px rgba(110, 70, 20, 0.42), 0 2px 8px -4px rgba(110, 70, 20, 0.12);
  --scrim: rgba(30, 20, 8, 0.32);
  --ink-paper: 168 93 5;
  --paper-empty: #f4f0ea;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="bernstein"]:not([data-theme="light"]) {
    --bg: #13100b;
    --surface: #1c1812;
    --sunk: #252019;
    --line: #342b20;
    --fg: #f1e9de;
    --muted: #ad9f8c;
    --ink: #f3b65e;
    --ink-soft: #3a2a14;
    --on-ink: #2a1a05;
    --ok: #7fd09a;
    --ok-soft: #1f2e1c;
    --glass: rgba(28, 24, 18, 0.64);
    --glass-edge: rgba(255, 255, 255, 0.07);
    --glass-hi: rgba(255, 255, 255, 0.1);
    --glow-1: rgba(150, 95, 20, 0.36);
    --glow-2: rgba(120, 50, 40, 0.26);
    --glow-3: rgba(110, 90, 30, 0.26);
    --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
  }
}
:root[data-design="bernstein"][data-theme="dark"] {
  --bg: #13100b;
  --surface: #1c1812;
  --sunk: #252019;
  --line: #342b20;
  --fg: #f1e9de;
  --muted: #ad9f8c;
  --ink: #f3b65e;
  --ink-soft: #3a2a14;
  --on-ink: #2a1a05;
  --ok: #7fd09a;
  --ok-soft: #1f2e1c;
  --glass: rgba(28, 24, 18, 0.64);
  --glass-edge: rgba(255, 255, 255, 0.07);
  --glass-hi: rgba(255, 255, 255, 0.1);
  --glow-1: rgba(150, 95, 20, 0.36);
  --glow-2: rgba(120, 50, 40, 0.26);
  --glow-3: rgba(110, 90, 30, 0.26);
  --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
}

/* Graphit: Schwarz, Weiß und Grautöne, präzise Grotesk */
:root[data-design="graphit"] {
  --display-weight: 600;
  --display-tracking: -0.04em;
  --display-em: normal;
  --display-em-color: var(--muted);
  --btn-radius: 9px;
  --r-s: 7px;
  --r-m: 9px;
  --r-l: 14px;
  --icon-stroke: 1.15;
  --display: "Geist Display", "Geist Display Ersatz", -apple-system, sans-serif;
  --body: "Geist", "Geist Ersatz", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Geist Mono", "Geist Mono Ersatz", ui-monospace, Menlo, monospace;
  --bg: #f4f4f5;
  --surface: #ffffff;
  --sunk: #ececee;
  --line: #dfdfe3;
  --fg: #111113;
  --muted: #66666f;
  --ink: #111113;
  --ink-soft: #e9e9ec;
  --on-ink: #ffffff;
  --ok: #2e8a57;
  --ok-soft: #e2f2e8;
  --glass: rgba(247, 247, 249, 0.7);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-hi: rgba(255, 255, 255, 0.92);
  --glow-1: rgba(214, 214, 222, 0.6);
  --glow-2: rgba(232, 232, 238, 0.55);
  --glow-3: rgba(205, 212, 228, 0.4);
  --tint: 30 30 36;
  --tint-deep: 10 10 14;
  --tint-mid: 40 40 46;
  --shadow: 0 18px 44px -22px rgba(20, 20, 26, 0.38), 0 2px 8px -4px rgba(20, 20, 26, 0.12);
  --scrim: rgba(10, 10, 12, 0.32);
  --ink-paper: 17 17 19;
  --paper-empty: #f2f2f3;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="graphit"]:not([data-theme="light"]) {
    --bg: #0a0a0b;
    --surface: #141416;
    --sunk: #1c1c1f;
    --line: #2a2a2e;
    --fg: #ededef;
    --muted: #95959d;
    --ink: #f2f2f4;
    --ink-soft: #26262b;
    --on-ink: #0a0a0b;
    --ok: #7fd09a;
    --ok-soft: #1b2b21;
    --glass: rgba(20, 20, 23, 0.62);
    --glass-edge: rgba(255, 255, 255, 0.07);
    --glass-hi: rgba(255, 255, 255, 0.1);
    --glow-1: rgba(70, 70, 80, 0.35);
    --glow-2: rgba(45, 45, 52, 0.35);
    --glow-3: rgba(55, 62, 80, 0.3);
    --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
  }
}
:root[data-design="graphit"][data-theme="dark"] {
  --bg: #0a0a0b;
  --surface: #141416;
  --sunk: #1c1c1f;
  --line: #2a2a2e;
  --fg: #ededef;
  --muted: #95959d;
  --ink: #f2f2f4;
  --ink-soft: #26262b;
  --on-ink: #0a0a0b;
  --ok: #7fd09a;
  --ok-soft: #1b2b21;
  --glass: rgba(20, 20, 23, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.07);
  --glass-hi: rgba(255, 255, 255, 0.1);
  --glow-1: rgba(70, 70, 80, 0.35);
  --glow-2: rgba(45, 45, 52, 0.35);
  --glow-3: rgba(55, 62, 80, 0.3);
  --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
}

/* Pflaume: Pflaumenviolett, Zeitungsschrift mit kursiven Betonungen */
:root[data-design="pflaume"] {
  --display-weight: 500;
  --display-tracking: -0.02em;
  --display-em: italic;
  --display-em-color: var(--ink);
  --btn-radius: 999px;
  --r-s: 11px;
  --r-m: 15px;
  --r-l: 22px;
  --icon-stroke: 1.45;
  --display: "Newsreader Display", "Newsreader Display Ersatz", "New York", Georgia, serif;
  --body: "Plus Jakarta Sans", "Plus Jakarta Sans Ersatz", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Fragment Mono", "Fragment Mono Ersatz", ui-monospace, Menlo, monospace;
  --bg: #f5f2f7;
  --surface: #fdfcfe;
  --sunk: #ede6f1;
  --line: #e1d8e7;
  --fg: #221a28;
  --muted: #6b5f74;
  --ink: #7a3ea6;
  --ink-soft: #f0e5f7;
  --on-ink: #ffffff;
  --ok: #2e8a57;
  --ok-soft: #e2f2e8;
  --glass: rgba(249, 246, 251, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.8);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --glow-1: rgba(214, 186, 240, 0.58);
  --glow-2: rgba(250, 203, 216, 0.48);
  --glow-3: rgba(190, 204, 250, 0.42);
  --tint: 90 40 120;
  --tint-deep: 45 15 65;
  --tint-mid: 80 45 100;
  --shadow: 0 18px 44px -22px rgba(90, 40, 120, 0.42), 0 2px 8px -4px rgba(90, 40, 120, 0.12);
  --scrim: rgba(24, 12, 30, 0.32);
  --ink-paper: 122 62 166;
  --paper-empty: #f4f1f6;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="pflaume"]:not([data-theme="light"]) {
    --bg: #120d16;
    --surface: #1b1520;
    --sunk: #241c2b;
    --line: #33293b;
    --fg: #efe7f4;
    --muted: #a697b0;
    --ink: #d0a0f6;
    --ink-soft: #321f42;
    --on-ink: #22102f;
    --ok: #7fd09a;
    --ok-soft: #1f2b25;
    --glass: rgba(27, 21, 32, 0.62);
    --glass-edge: rgba(255, 255, 255, 0.07);
    --glass-hi: rgba(255, 255, 255, 0.1);
    --glow-1: rgba(110, 50, 150, 0.38);
    --glow-2: rgba(140, 50, 90, 0.26);
    --glow-3: rgba(50, 60, 140, 0.28);
    --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
  }
}
:root[data-design="pflaume"][data-theme="dark"] {
  --bg: #120d16;
  --surface: #1b1520;
  --sunk: #241c2b;
  --line: #33293b;
  --fg: #efe7f4;
  --muted: #a697b0;
  --ink: #d0a0f6;
  --ink-soft: #321f42;
  --on-ink: #22102f;
  --ok: #7fd09a;
  --ok-soft: #1f2b25;
  --glass: rgba(27, 21, 32, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.07);
  --glass-hi: rgba(255, 255, 255, 0.1);
  --glow-1: rgba(110, 50, 150, 0.38);
  --glow-2: rgba(140, 50, 90, 0.26);
  --glow-3: rgba(50, 60, 140, 0.28);
  --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.5);
}