/* Lectio – Design-Tokens. „Lesesaal am Abend“: Papier, Tinte, Nussbaum, Messing. */

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("../fonts/literata-latin.woff2") format("woff2-variations"), url("../fonts/literata-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/public-sans-latin.woff2") format("woff2-variations"), url("../fonts/public-sans-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Grundfarben (hell) */
  --paper: #EDEFEA;
  --paper-raised: #F6F7F3;
  --ink: #1D232C;
  --ink-muted: #5E6570;
  --rule: #CDD1C9;
  --wood: #6A4E39;
  --wood-edge: #7E604A;
  --wood-dark: #4F3829;
  --brass: #A8844F;
  --danger: #9C3B32;

  /* Fachfarben (gedämpfte Buchleinen-Töne) */
  --sub-bordeaux: #7A2E3A;
  --sub-petrol: #1F5F66;
  --sub-ocker: #B7862F;
  --sub-salbei: #7C9474;
  --sub-navy: #24365C;
  --sub-pflaume: #5E3B5C;
  --sub-rost: #9A4A2C;
  --sub-moos: #4F5B2E;
  --sub-taubenblau: #5A7A94;
  --sub-senf: #B59A3A;
  --sub-graphit: #4A4D52;
  --sub-altrosa: #A8645E;
  --sub-kirsche: #A63430;
  --sub-aprikose: #C27A47;
  --sub-sand: #B29A70;
  --sub-smaragd: #2E6B4F;
  --sub-mint: #639C87;
  --sub-kobalt: #305491;
  --sub-lavendel: #8379A9;
  --sub-malve: #9E6789;

  /* Abgeleitete Flächen */
  --shadow-book: 1px 0 0 rgb(0 0 0 / 0.18), 0 1px 2px rgb(0 0 0 / 0.18);
  --shadow-board: 0 10px 14px -8px rgb(29 35 44 / 0.45), 0 2px 3px rgb(29 35 44 / 0.2);
  --shadow-dialog: 0 24px 60px -20px rgb(29 35 44 / 0.35), 0 2px 8px rgb(29 35 44 / 0.08);
  --backdrop: rgb(29 35 44 / 0.28);
  --heat-0: #DDE0D9;

  /* Typografie */
  --font-serif: "Literata", "Iowan Old Style", Georgia, serif;
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.375rem;
  --fs-xl: 2rem;
  --fs-timer: 6.5rem;

  /* Abstände (4-px-Raster) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  /* Radien */
  --r-pill: 999px;
  --r-dialog: 14px;
  --r-input: 8px;
  --r-book: 2px;
  --r-leather: 3px;

  /* Bewegung */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;

  --content-max: 960px;
}

/* Dunkelmodus: System-Einstellung, sofern nicht manuell hell gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14181E;
    --paper-raised: #1C2129;
    --ink: #E6E3DB;
    --ink-muted: #9AA0A8;
    --rule: #2C323C;
    --wood: #3D2E24;
    --wood-edge: #4C3A2E;
    --wood-dark: #2A1F18;
    --brass: #C29D62;
    --danger: #D07A6F;
    --sub-bordeaux: #983948;
    --sub-petrol: #297C85;
    --sub-ocker: #CE9B41;
    --sub-salbei: #92A68B;
    --sub-navy: #2F4779;
    --sub-pflaume: #774B75;
    --sub-rost: #BA5935;
    --sub-moos: #67763C;
    --sub-taubenblau: #6F8EA8;
    --sub-senf: #C7AD51;
    --sub-graphit: #5D6167;
    --sub-altrosa: #B67D78;
    --sub-kirsche: #C63E39;
    --sub-aprikose: #CC9166;
    --sub-sand: #C1AD8B;
    --sub-smaragd: #3A8863;
    --sub-mint: #7CAB9A;
    --sub-kobalt: #3B66B0;
    --sub-lavendel: #9A92B9;
    --sub-malve: #AD7F9D;
    --shadow-board: 0 10px 16px -8px rgb(0 0 0 / 0.7), 0 2px 3px rgb(0 0 0 / 0.4);
    --shadow-dialog: 0 24px 60px -20px rgb(0 0 0 / 0.7), 0 2px 8px rgb(0 0 0 / 0.3);
    --backdrop: rgb(5 7 10 / 0.55);
    --heat-0: #232933;
  }
}

/* Dunkelmodus: manuell gewählt */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14181E;
  --paper-raised: #1C2129;
  --ink: #E6E3DB;
  --ink-muted: #9AA0A8;
  --rule: #2C323C;
  --wood: #3D2E24;
  --wood-edge: #4C3A2E;
  --wood-dark: #2A1F18;
  --brass: #C29D62;
  --danger: #D07A6F;
  --sub-bordeaux: #983948;
  --sub-petrol: #297C85;
  --sub-ocker: #CE9B41;
  --sub-salbei: #92A68B;
  --sub-navy: #2F4779;
  --sub-pflaume: #774B75;
  --sub-rost: #BA5935;
  --sub-moos: #67763C;
  --sub-taubenblau: #6F8EA8;
  --sub-senf: #C7AD51;
  --sub-graphit: #5D6167;
  --sub-altrosa: #B67D78;
  --sub-kirsche: #C63E39;
  --sub-aprikose: #CC9166;
  --sub-sand: #C1AD8B;
  --sub-smaragd: #3A8863;
  --sub-mint: #7CAB9A;
  --sub-kobalt: #3B66B0;
  --sub-lavendel: #9A92B9;
  --sub-malve: #AD7F9D;
  --shadow-board: 0 10px 16px -8px rgb(0 0 0 / 0.7), 0 2px 3px rgb(0 0 0 / 0.4);
  --shadow-dialog: 0 24px 60px -20px rgb(0 0 0 / 0.7), 0 2px 8px rgb(0 0 0 / 0.3);
  --backdrop: rgb(5 7 10 / 0.55);
  --heat-0: #232933;
}