/* ===== Alef Beth – Design-Tokens =====
   Farben, Schatten, Abstände, Radien, Maße, Ebenen, Bewegung und Schrift aus
   dem Alef Beth Design System. components.css und style.css verwenden nur
   diese Variablen und Typo-Klassen – neue Farben oder Größen gehören hierher. */

/* ---------- Schriften (selbst gehostet für den Offline-Betrieb, OFL) ----------
   Rubik: Oberfläche. Frank Ruhl Libre: Hebräisch und Buchstabennamen.
   unicode-range sorgt dafür, dass jede Datei nur geladen wird, wenn
   Zeichen aus ihrem Bereich auf der Seite stehen. */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/rubik-latin.woff2") format("woff2");
  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: "Frank Ruhl Libre Hebrew";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/frankruhllibre-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/frankruhllibre-latin.woff2") format("woff2");
  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;
}

/* ---------- Farben und Schatten: hell ---------- */
:root, [data-theme="light"] {
  color-scheme: light;
  --paper: #fcf7ef;
  --card: #ffffff;
  --well: #f4eadb;
  --line: #e8dac4;
  --control: #93805f;
  --ink: #2a1f14;
  --ink-soft: #6b5b45;
  --granat: #c22d48;
  --granat-ledge: #8e1c34;
  --granat-soft: #fde6ea;
  --granat-ink: #b4263f;
  --on-granat: #ffffff;
  --gold: #f6b80d;
  --gold-ledge: #a87400;
  --gold-soft: #fff0c4;
  --gold-ink: #8a5a00;
  --on-gold: #3a2800;
  --minze: #0d8460;
  --minze-ledge: #075c42;
  --minze-soft: #daf3e8;
  --minze-ink: #0a7454;
  --on-minze: #ffffff;
  --koralle: #c4421a;
  --koralle-ledge: #8c2c0e;
  --koralle-soft: #fde5da;
  --koralle-ink: #b3350e;
  --on-koralle: #ffffff;
  --tekhelet: #2f5bd3;
  --tekhelet-ledge: #1e3f9e;
  --tekhelet-soft: #e2eafd;
  --tekhelet-ink: #2a52c4;
  --on-tekhelet: #ffffff;
  --focus: var(--tekhelet-ink);
  --scrim: rgba(42, 31, 20, 0.45);
  --shadow-card: 0 1px 2px #2a1f140a, 0 6px 16px -6px #2a1f141f;
  --shadow-float: 0 4px 10px -2px #2a1f141a, 0 18px 40px -12px #2a1f1440;
  --shadow-sheet: 0 -10px 30px -14px #2a1f1440;
}

/* ---------- Dunkel, weil ausdrücklich gewählt ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15110d;
  --card: #211b16;
  --well: #2c241d;
  --line: #3b3129;
  --control: #8c7a62;
  --ink: #f7efe3;
  --ink-soft: #bdac93;
  --granat: #d03a55;
  --granat-ledge: #7d1a2e;
  --granat-soft: #3b1820;
  --granat-ink: #ff8d9d;
  --gold-soft: #382a0b;
  --gold-ink: #ffcd4d;
  --minze: #22b383;
  --minze-ledge: #0d6b4e;
  --minze-soft: #11302a;
  --minze-ink: #4fd6a6;
  --on-minze: #052a1e;
  --koralle: #ff6a3d;
  --koralle-ledge: #a8381a;
  --koralle-soft: #3d1d12;
  --koralle-ink: #ff9270;
  --on-koralle: #2a0b02;
  --tekhelet: #5b84f0;
  --tekhelet-ledge: #2b4bb0;
  --tekhelet-soft: #1a2547;
  --tekhelet-ink: #93b0ff;
  --on-tekhelet: #0a1633;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 2px #00000080, 0 6px 16px -6px #00000099;
  --shadow-float: 0 4px 10px -2px #00000099, 0 18px 40px -12px #000000cc;
  --shadow-sheet: 0 -12px 32px -12px #000000cc;
}

/* ---------- Dunkel, weil das System es so will („Automatisch“) ----------
   Gilt auch, solange data-theme noch fehlt (bevor app.js läuft) – sonst
   blitzt beim Start kurz das helle Design auf. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #15110d;
    --card: #211b16;
    --well: #2c241d;
    --line: #3b3129;
    --control: #8c7a62;
    --ink: #f7efe3;
    --ink-soft: #bdac93;
    --granat: #d03a55;
    --granat-ledge: #7d1a2e;
    --granat-soft: #3b1820;
    --granat-ink: #ff8d9d;
    --gold-soft: #382a0b;
    --gold-ink: #ffcd4d;
    --minze: #22b383;
    --minze-ledge: #0d6b4e;
    --minze-soft: #11302a;
    --minze-ink: #4fd6a6;
    --on-minze: #052a1e;
    --koralle: #ff6a3d;
    --koralle-ledge: #a8381a;
    --koralle-soft: #3d1d12;
    --koralle-ink: #ff9270;
    --on-koralle: #2a0b02;
    --tekhelet: #5b84f0;
    --tekhelet-ledge: #2b4bb0;
    --tekhelet-soft: #1a2547;
    --tekhelet-ink: #93b0ff;
    --on-tekhelet: #0a1633;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 2px #00000080, 0 6px 16px -6px #00000099;
    --shadow-float: 0 4px 10px -2px #00000099, 0 18px 40px -12px #000000cc;
    --shadow-sheet: 0 -12px 32px -12px #000000cc;
  }
}

/* ---------- Abstände, Radien, Maße, Ebenen, Bewegung, Schriftfamilien ---------- */
:root {
  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  /* Radien */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 999px;
  /* Maße */
  --ledge: 4px;
  --tap-target: 48px;
  --node: 72px;
  --content-width: 540px;
  --icon-sm: 18px;
  --icon-md: 24px;
  --icon-lg: 32px;
  /* Ebenen */
  --layer-nav: 40;
  --layer-sheet: 50;
  --layer-toast: 60;
  --layer-fx: 80;
  --layer-splash: 90;
  /* Dauern */
  --dur-press: 90ms;
  --dur-quick: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-epic: 900ms;
  --dur-loop: 2400ms;
  /* Kurven */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: linear(0, 0.18 4%, 0.6 11%, 0.96 18%, 1.13 24%, 1.16 28%, 1.12 33%, 1.02 42%, 0.98 51%, 0.99 63%, 1.005 77%, 1);
  /* Schriftfamilien */
  --font-sans: Rubik, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-hebrew: "Frank Ruhl Libre Hebrew", "Frank Ruhl Libre", "Noto Serif Hebrew", "Arial Hebrew", David, serif;
  --font-serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
}

/* ---------- Typo-Stile: Größe, Zeilenhöhe, Gewicht kommen nur von hier ---------- */
/* Hebräisch */
.glyph-xl { font-family: var(--font-hebrew); font-size: 96px; line-height: 1.2; font-weight: 400; }
.glyph-lg { font-family: var(--font-hebrew); font-size: 56px; line-height: 1.3; font-weight: 400; }
.glyph-md { font-family: var(--font-hebrew); font-size: 36px; line-height: 1.3; font-weight: 400; }
.hebrew-line { font-family: var(--font-hebrew); font-size: 26px; line-height: 1.6; font-weight: 400; }
.glyph-sm { font-family: var(--font-hebrew); font-size: 22px; line-height: 1.4; font-weight: 500; }
/* Oberfläche */
.text-display { font-family: var(--font-sans); font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em; }
.text-title { font-family: var(--font-sans); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.text-heading { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 700; }
.text-question { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 600; }
.text-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.text-strong { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; }
.text-button { font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: 0.01em; }
.text-label { font-family: var(--font-sans); font-size: 14px; line-height: 18px; font-weight: 700; }
.text-caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.text-overline { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; }
.text-numeral { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; }
/* Akzent */
.text-letter-name { font-family: var(--font-serif); font-size: 30px; line-height: 36px; font-weight: 700; }