/* colors.css */
/* Erzeugt aus tokens/quelle - nicht von Hand aendern, sondern `pnpm tokens` laufen lassen. */
/* Farbrollen, hell. Kein Bauteil enthaelt einen Hex-Wert - alles laeuft hierueber.
   Rollen, nie Leitern: "Karte", nicht "Beige 200". */
:root {
  /* --- Grundfarben (Notizbuch: warmes Papier, Tinte) --- */
  --grund: #F8F2E7; /* Seitenhintergrund, warmes Creme */
  --karte: #EEE8DD; /* Standardkarte (Termin), beige */
  --hell: #FBF7EE; /* Tagesreiter, Menüs, Badges auf Karten, Suchfeld */
  --knopf-zweit: #EDE6D8; /* Segment-Regler inaktiv, sekundäre Knöpfe */
  --schwarz: #171717; /* Leiste, primäre Knöpfe, heutiger Tag, aktive Auswahl */
  --schwarz-zeiger: #2C2C2C; /* Schwarz unter dem Zeiger (Knopf, Kreis, heutiger Reiter) */
  --schwarz-druck: #3A3A3A; /* Schwarz beim Drücken */
  --tinte: #1A1A1A; /* Fließtext, Titel */
  --grau: #6E6A63; /* Zweittext, Zeiten, Beschriftungen */
  --linie: #D8D0BF; /* Haarlinien 1 px, Ränder von Feldern und Kreisen */
  --rosa: #F3B8DF; /* Akzent: Plus, Jetzt-Zeit, aktiver Ort, Zähler, Lupe */
  --rosa-hell: #F7CDE8; /* Zustands-Pillen, Tageskreis mit Offenem */
  --gelb: #F5D95C; /* Familie und Rituale, Alberts Vorschlag (iPhone), Zahlen */
  --gelb-dunkel: #E4C63A; /* Formen auf gelben Karten */
  --ampel-gruen: #BFD9A6; /* Bewertung: gut (HQ) */
  --ampel-gelb: var(--gelb); /* Bewertung: Potenzial (HQ) */
  --ampel-rot: #EBA7A0; /* Bewertung: schwach (HQ) */
  --text-auf-ampel: #2B2A25;
  --blau: #BFCDF0; /* Fahrten */
  --blau-dunkel: #9DB1E3; /* Formen auf blauen Karten */
  --offen: #B8467F; /* nur gestrichelter Rand für „ohne Zuständigen“ */
  --auf-gelb: #4A4530; /* Zweittext auf gelben Flächen */
  --leistentext: #F4EFE6; /* Text und Zeichen auf Schwarz */
  --sonntag: #C9A0BD; /* gedämpftes Rosa-Grau für den Sonntag */

  /* --- Semantische Rollen: Flächen --- */
  --flaeche-seite: var(--grund);
  --flaeche-erhoben: var(--hell); /* was schwebt: Menü, Reiter, Feld */
  --flaeche-karte: var(--karte); /* Termin */
  --flaeche-karte-fahrt: var(--blau); /* Fahrt */
  --flaeche-karte-familie: var(--gelb); /* Familie und Ritual */
  --flaeche-karte-vorschlag: transparent; /* Vorschlag: gestrichelt, ohne Füllung */
  --flaeche-leiste: var(--schwarz);
  --flaeche-schleier: rgba(26, 26, 26, 0.32); /* dämpft, was dahinter liegt */
  --leiste-ort-zeiger: rgba(244, 239, 230, 0.08); /* Ort in der Leiste unter dem Zeiger */
  --leiste-ort-aktiv-zeiger: rgba(244, 239, 230, 0.14); /* aktiver Ort in der Leiste unter dem Zeiger */

  /* --- Semantische Rollen: Text --- */
  --text-koerper: var(--tinte);
  --text-titel: var(--tinte);
  --text-zweit: var(--grau);
  --text-auf-leiste: var(--leistentext);
  --text-auf-leiste-zweit: #9A948B;
  --text-auf-gelb: var(--auf-gelb);
  --text-auf-blau: var(--tinte);
  --text-auf-blau-zweit: #4A4F63; /* Zweittext auf blauen Flächen (Fahrt) */
  --text-auf-rosa: var(--tinte);
  --text-inaktiv: #A29B8F; /* gerechnet, keine Deckkraft */

  /* --- Semantische Rollen: Linien und Ränder --- */
  --linie-haar: var(--linie);
  --linie-stark: #C2B8A2; /* Kontur 1,5 px statt 1 px */
  --linie-inaktiv: #E4DDCE; /* gerechnet, keine Deckkraft */
  --linie-jetzt: var(--tinte); /* gestrichelte Jetzt-Achse */
  --rand-vorschlag: var(--grau); /* gestrichelt grau: Vorschlag von Albert */
  --rand-offen: var(--offen); /* gestrichelt: ohne Zuständigen */
  --rand-fokus: var(--offen); /* :focus-visible Ring */

  /* --- Semantische Rollen: Akzent und Bedeutung --- */
  --akzent: var(--rosa); /* Akzent und „jetzt“ – nie Fehler */
  --akzent-hell: var(--rosa-hell);
  --akzent-tief: var(--offen);
  --bedeutung-fahrt: var(--blau);
  --bedeutung-fahrt-tief: var(--blau-dunkel);
  --bedeutung-familie: var(--gelb);
  --bedeutung-familie-tief: var(--gelb-dunkel);
  --bedeutung-termin: var(--karte);

  /* --- Knöpfe --- */
  --knopf-primaer-flaeche: var(--schwarz);
  --knopf-primaer-flaeche-zeiger: var(--schwarz-zeiger); /* Druck macht die Fläche nicht dunkler, sondern die Schrift ruhiger */
  --knopf-primaer-flaeche-druck: var(--schwarz-druck);
  --knopf-primaer-text: var(--leistentext);
  --knopf-zweit-flaeche: var(--knopf-zweit);
  --knopf-zweit-text: var(--tinte);
  --knopf-inaktiv-flaeche: #E9E2D4;
  --knopf-inaktiv-text: var(--text-inaktiv);

  /* --- Personenfarben (Klebezettel). Text darauf ist immer Tinte. Acht Plätze; Familie Sonntag belegt fünf. --- */
  --person-1: #D5F5C2; /* Anna - Mint */
  --person-2: #A8E5E5; /* Tobias - Türkis */
  --person-3: #F6D0FF; /* Felix - Flieder */
  --person-4: #FFD6A5; /* Lena - Pfirsich */
  --person-5: #AEBAFF; /* Sofia - Himmel */
  --person-6: #C7EFD0; /* frei */
  --person-7: #FFC9C9; /* frei */
  --person-8: #E3DCA8; /* frei */
  --person-text: var(--tinte);
  --person-linie-1: #8FCF6E;
  --person-linie-2: #62BFBF;
  --person-linie-3: #D28FE8;
  --person-linie-4: #E0A55F;
  --person-linie-5: #7B8BE0;
  --person-linie-6: #7FC993;
  --person-linie-7: #E08F8F;
  --person-linie-8: #B7AE6A;
}

/* colors-dark.css */
/* Erzeugt aus tokens/quelle - nicht von Hand aendern, sondern `pnpm tokens` laufen lassen. */
/* Dunkler Modus: eine Rollen-Neudefinition, keine zweite Gestaltung.
   Die Personen-Zettel bleiben hell - ein Klebezettel ist auch nachts ein heller Schnipsel. */
:root[data-modus="dunkel"] {
  /* --- Grundfarben, nachts --- */
  --grund: #14110D; /* tiefes Schwarz-Braun */
  --karte: #2A2620; /* dunkles Beige-Grau */
  --hell: #201C17;
  --knopf-zweit: #322D26;
  --schwarz: #0B0A08;
  --tinte: #F4EFE6; /* Tinte wird Creme */
  --grau: #A9A297;
  --linie: #3D372E;
  --rosa: #F3B8DF;
  --rosa-hell: #F7CDE8;
  --gelb: #F5D95C;
  --gelb-dunkel: #E4C63A;
  --blau: #BFCDF0;
  --blau-dunkel: #9DB1E3;
  --offen: #F09CC6; /* kräftigere Stufe, damit der Rand nachts trägt */
  --auf-gelb: #4A4530;
  --leistentext: #F4EFE6;
  --sonntag: #B98CAD;

  /* --- Flächen, Text, Linien, Knöpfe --- */
  --flaeche-erhoben: var(--hell);
  --flaeche-leiste: #0B0A08;
  --flaeche-schleier: rgba(0, 0, 0, 0.56);
  --text-auf-leiste-zweit: #8C857A;

  /* --- Text auf farbigen Flächen bleibt dunkel. --- */
  --text-auf-gelb: #4A4530;
  --text-auf-blau: #1A1A1A;
  --text-auf-rosa: #1A1A1A;
  --text-inaktiv: #7A7469;
  --linie-stark: #524A3D;
  --linie-inaktiv: #2B2620;
  --linie-jetzt: #F4EFE6;
  --rand-vorschlag: #A9A297;

  /* --- Knöpfe --- */
  --knopf-primaer-flaeche: #F4EFE6;
  --knopf-primaer-flaeche-zeiger: #E2DACD; /* der helle Primärknopf wird unter dem Zeiger etwas dunkler */
  --knopf-primaer-flaeche-druck: #CFC6B7;
  --knopf-primaer-text: #171717;
  --knopf-inaktiv-flaeche: #2B2620;
  --person-text: #1A1A1A;

  /* --- Personen-Linien, nachts etwas heller --- */
  --person-linie-1: #A6DE87;
  --person-linie-2: #7FD6D6;
  --person-linie-3: #E4A8F5;
  --person-linie-4: #F0BE7C;
  --person-linie-5: #9AA8F0;
  --person-linie-6: #98DBAA;
  --person-linie-7: #F0A8A8;
  --person-linie-8: #CFC57F;
}

/* typography.css */
/* Erzeugt aus tokens/quelle - nicht von Hand aendern, sondern `pnpm tokens` laufen lassen. */
/* Schrift. Titel in Bricolage Grotesque 800, Text in Inter,
   Roboto Mono fuer technische Kennungen, Reenie Beanie nur als Handschrift. */
:root {
  /* --- Schriften --- */
  --schrift-titel: "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif; /* @kind font */
  --schrift-text: "Inter", system-ui, -apple-system, sans-serif; /* @kind font */
  --schrift-mono: "Roboto Mono", ui-monospace, "SF Mono", monospace; /* @kind font */
  --schrift-hand: "Reenie Beanie", "Bradley Hand", cursive; /* @kind font */

  /* --- Gewichte --- */
  --gewicht-titel: 800; /* @kind font */
  --gewicht-text: 400; /* @kind font */
  --gewicht-text-halb: 500; /* @kind font */
  --gewicht-text-fest: 600; /* @kind font */

  /* --- Grade --- */
  --grad-anrede-mac: 40px; /* „Guten Morgen, Anna.“ auf dem Mac */
  --grad-anrede-phone: 30px; /* dieselbe Zeile auf dem iPhone */
  --grad-zahl-gross: 34px; /* Zahl-Kachel: 8,7 h */
  --grad-block-titel: 22px; /* Logo in der Leiste */
  --grad-abschnitt: 17px;
  --grad-karten-titel: 14.5px; /* Kartentitel */
  --grad-text: 14px;
  --grad-zweit: 12px; /* Zweitzeile, Zeiten */
  --grad-klein: 11px;
  --grad-kapitaelchen: 10px; /* Wochentag im Tagesreiter */

  /* --- Laufweite --- */
  --laufweite-titel: -0.03em; /* @kind font */ /* eng, wie in den Screensets */
  --laufweite-text: 0em; /* @kind font */
  --laufweite-kapitaelchen: 0.08em; /* @kind font */

  /* --- Zeilen --- */
  --zeile-titel: 1.02; /* @kind font */
  --zeile-karten-titel: 1.2; /* @kind font */
  --zeile-text: 1.45; /* @kind font */

  /* --- Ziffern --- */
  --ziffern-tabellarisch: "tnum" 1, "lnum" 1; /* @kind font */ /* Zahlen und Zeiten: tabellarische Ziffern */
}

/* spacing.css */
/* Erzeugt aus tokens/quelle - nicht von Hand aendern, sondern `pnpm tokens` laufen lassen. */
/* 8-px-Raster. Zielflaechen nach Geraet und Alter. */
:root {
  /* --- 8-px-Raster --- */
  --raum-halb: 4px;
  --raum-1: 8px;
  --raum-2: 16px;
  --raum-3: 24px;
  --raum-4: 32px;
  --raum-5: 40px;
  --raum-6: 48px;
  --raum-8: 64px;

  /* --- Abstände, wie in den Screensets gemessen --- */
  --karte-innen: 12px;
  --karte-abstand: 8px;
  --flaeche-rand-mac: 32px;
  --flaeche-rand-phone: 20px;

  /* --- Zielflächen --- */
  --ziel-zeiger: 28px;
  --ziel-finger: 44px;
  --ziel-kind: 56px;

  /* --- Leisten --- */
  --leiste-mac: 220px;
  --leiste-mac-eng: 72px;
  --leiste-phone-hoehe: 64px;
}

/* shape.css */
/* Erzeugt aus tokens/quelle - nicht von Hand aendern, sondern `pnpm tokens` laufen lassen. */
/* Form. Keine Schatten - Tiefe kommt aus Schleier, Kontur und Kippung. */
:root {
  /* --- Radien --- */
  --radius-karte: 16px; /* Karten und Menüs */
  --radius-klein: 12px; /* Tagesreiter, kleine Karten */
  --radius-leiste: 24px; /* iPhone-Leiste */
  --radius-block: 22px; /* Mac-Block */
  --radius-pille: 999px; /* Pillen, Kreise, Knöpfe */

  /* --- Striche --- */
  --strich-haar: 1px;
  --strich-stark: 1.5px; /* Kontur wird stark, statt Schatten */
  --strich-gestrichelt: 1.5px;
  --muster-gestrichelt: 5px 4px; /* @kind other */

  /* --- Kippung --- */
  --kippung-zettel: 0.3deg; /* @kind other */ /* was liegt, ist leicht gekippt */
  --kippung-null: 0deg; /* @kind other */ /* was schwebt, steht gerade */

  /* --- Schatten und Fokus --- */
  --schatten: none; /* @kind shadow */ /* nicht verhandelbar */
  --fokus-ring: 2px;
  --fokus-abstand: 2px;
}

/* motion.css */
/* Erzeugt aus tokens/quelle - nicht von Hand aendern, sondern `pnpm tokens` laufen lassen. */
/* Bewegung. Ruhig, kurz, ohne Federn. Skelett atmet, nie ein Kreisel. */
:root {
  /* --- Dauern --- */
  --dauer-kurz: 120ms; /* @kind other */
  --dauer-mittel: 200ms; /* @kind other */
  --dauer-atem: 300ms; /* @kind other */

  /* --- Verläufe --- */
  --verlauf-ruhig: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --verlauf-atem: cubic-bezier(0.4, 0, 0.6, 1); /* @kind other */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dauer-kurz: 0ms; /* @kind other */
    --dauer-mittel: 0ms; /* @kind other */
    --dauer-atem: 0ms; /* @kind other */
  }
}