/*
  Design-Tokens: Kalk 1.1, das Corporate Design von Inolares.

  Quelle ist das Branding-Projekt (inolares-branding/02-corporate-design/kalk.css,
  erzeugt aus design-book/src/tokens.js). Der erste Block steht hier wie dort und
  wird nicht von Hand geaendert: erst im Branding, dann hierher uebernehmen.
  tests/Assets/KalkTokensTest.php vergleicht beide, wenn das Branding-Projekt
  neben diesem liegt.

  Der zweite Block uebersetzt Kalk in die Rollen, die app.css liest (Grund,
  Flaeche, Text, Linie, Akzent, Zustand). Komponenten kennen nur diese Rollen.

  Ein Dunkelmodus fehlt mit Absicht: Kalk hat keinen. Dunkle Flaechen gibt es
  trotzdem, als Tanne (Seitenleiste) und Schwarz.

  Schrift: Suisse Int'l ist die Hausschrift, ohne Lizenz aber nicht einbettbar
  (die Testschnitte haben kein ä, ö, ü, ß). Bis dahin traegt Geist, wie Kalk es
  vorsieht. Sie liegt lokal unter /fonts/geist (SIL OFL 1.1, keine Fremdanfrage).
*/

@font-face { font-family: Geist; font-weight: 400; font-display: swap; src: url("/fonts/geist/geist-400.woff2") format("woff2"); }
@font-face { font-family: Geist; font-weight: 500; font-display: swap; src: url("/fonts/geist/geist-500.woff2") format("woff2"); }
@font-face { font-family: Geist; font-weight: 600; font-display: swap; src: url("/fonts/geist/geist-600.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url("/fonts/geist/geist-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url("/fonts/geist/geist-mono-500.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* --- Kalk 1.1, wie in kalk.css --- */
  --kalk: #F4F3EE;
  --weiss: #FFFFFF;
  --schwarz: #111111;
  --stein: #6A6A64;
  --kiesel: #A3A39C;
  --linie: #DDDBD3;
  --linie-stark: #C6C4BB;
  --kante: #85847D;
  --lime: #D7F25A;
  --lime-dunkel: #B9D93F;
  --tanne: #163A2E;
  --tanne-hell: #1F4F3F;
  --blatt: #EAF6D0;
  --moos: #2E8B61;
  --erfolg: #2E8B61;
  --erfolg-text: #1E6B4A;
  --warnung: #C98500;
  --warnung-flaeche: #FBF1D6;
  --warnung-text: #8A5C00;
  --fehler: #D03B3B;
  --fehler-flaeche: #FBE3E3;
  --fehler-text: #A32B2B;
  --info: #2A78D6;
  --info-flaeche: #E2EDFB;
  --info-text: #1A4E8F;
  --grau-100: #ECEBE5;
  --grau-600: #3F3F3B;
  --serie-1: #2E8B61;
  --serie-2: #2A78D6;
  --serie-3: #EB6834;
  --serie-4: #4A3AA7;
  --font-display: 'Suisse Intl', 'Geist', system-ui, sans-serif;
  --font-text: 'Suisse Intl', 'Geist', system-ui, sans-serif;
  --font-mono: 'Suisse Intl Mono', 'Geist Mono', ui-monospace, monospace;
  --ecke-tag: 0 12px 0 0;
  --ecke-knopf-s: 0 16px 0 0;
  --ecke-knopf: 0 22px 0 0;
  --stadion: 999px;
  --schatten-1: 0 1px 0 rgba(17, 17, 17, 0.06);
  --schatten-2: 0 12px 30px -18px rgba(17, 17, 17, 0.25);
  --schatten-3: 0 30px 60px -30px rgba(17, 17, 17, 0.35);
  --inhalt: 1312px;
  --kopf-h: 72px;
  --satz: 58ch;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.16, 1, 0.3, 1);
  --t-kurz: 200ms;
  --t-mittel: 400ms;
  --t-lang: 800ms;
  --versatz: 6px;
  --anheben: 2px;

  /* --- Rollen der Anwendung ---
     Grund Kalkweiss, Inhalt auf Weiss, Text Schwarz, Nebentext Stein (4,9 : 1). */
  --ground: var(--kalk);
  --bg: var(--weiss);
  --fg: var(--schwarz);
  --fg-muted: var(--stein);
  --surface: var(--weiss);
  --line: var(--linie);
  --line-strong: var(--schwarz);
  --border: var(--kante);          /* Kante von Feldern, Kaestchen, Chips: 3,8 : 1 auf Weiss */

  /* Handlung: Lime traegt Schwarz und erscheint nie als Text. Wo ein Akzent Text
     ist (Links, Pflichtstern, aktive Zeile), steht Tanne. */
  --accent: var(--lime);
  --accent-hover: var(--lime-dunkel);
  --accent-on: var(--schwarz);
  --accent-ink: var(--tanne);
  --accent-soft: var(--blatt);
  --focus: var(--tanne);

  /* Zustaende. Als Text stehen --erfolg-text, --warnung-text und --fehler-text
     (AA auf Weiss und auf ihrer Flaeche); --erfolg, --warnung und --fehler sowie
     -mark sind die Farben fuer Punkte, Kanten und Striche und tragen nie Text –
     KalkTokensTest haelt das fest. */
  --erfolg-mark: var(--erfolg);
  --erfolg-soft: var(--blatt);
  --warnung-mark: var(--warnung);
  --warnung-soft: var(--warnung-flaeche);
  --fehler-mark: var(--fehler);
  --fehler-soft: var(--fehler-flaeche);
  --hinweis: var(--info-text);
  --hinweis-soft: var(--info-flaeche);

  /* Diagramme: Moos ist immer die erste Reihe. Lime steht nie in einem Diagramm. */
  --chart-1: var(--serie-1);

  --target-min: 44px;

  /* Schrift: die Stufen der Kalk-Typoskala, benannt nach ihrer Groesse in px.
     13 ist die kleinste (D47). */
  --fw-display: 600;
  --fs-13: 0.8125rem;
  --fs-15: 0.9375rem;
  --fs-17: 1.0625rem;
  --fs-19: 1.1875rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --lh-text: 1.5;
  --lh-display: 1.1;
  --measure: var(--satz);

  /* Raum: die Kalk-Skala 4 bis 128 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;

  --content-width: var(--inhalt);

  /* Bewegung: Zustand kurz, Erscheinen mittel, Ansicht lang */
  --dur-fast: var(--t-kurz);
  --dur: var(--t-mittel);
  --dur-slow: var(--t-lang);
}

/* Fokus (D47): 2 px Tanne mit 2 px Abstand, auf dunkler Flaeche Kalkweiss. */
:where(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
:where(.k-dunkel) :where(:focus-visible) { outline-color: var(--kalk); }

/* Reduzierte Bewegung: keine Wege, keine Dauern, keine Verzoegerungen. Der
   Ladeindikator steht still. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}