/* ==========================================================================
   scin — Design-Tokens. Die einzige Stelle, an der Farben, Maße, Schriften
   und Zeiten festgelegt werden (docs/DESIGN_PLAN.md, Teil B2).

   Wird als ERSTES Stylesheet geladen, vor stil.css. Die Variablen, die es
   vorher in stil.css gab, stehen jetzt hier — nicht doppelt, sondern
   umgezogen. Neue Namen aus dem Plan, die dasselbe meinen wie ein
   bestehender Name, sind als Verweis angelegt (z. B. --label auf --ink):
   so funktioniert der alte Code unverändert weiter und neuer Code kann
   die Namen aus dem Plan benutzen.

   Dunkelmodus: alles, was unten im @media-Block noch einmal steht, ist
   dort anders. Wer eine Farbe fest hineinschreibt statt eine Variable zu
   nehmen, hebelt den Dunkelmodus aus.
   ========================================================================== */

:root{
  /* „light dark" statt nur „light": erst dadurch folgt die App überhaupt
     dem Schalter des Systems — das war der größte fehlende Baustein. */
  color-scheme:light dark;

  /* ---- Abstände: nur diese fünf ---- */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px;
  --page-x:16px;                     /* Seitenrand, überall gleich */

  /* ---- Schrift ---- */
  --schrift:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --font:var(--schrift);                       /* Name aus dem Plan */
  /* Erode bleibt der Marke vorbehalten (Wortmarke, Name, PDF, Kundengalerie) */
  --marke-schrift:"Erode","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-marke:var(--marke-schrift);           /* Name aus dem Plan */

  --t-large-title:700 34px/41px var(--schrift);
  --t-title2:     700 22px/28px var(--schrift);
  --t-headline:   600 17px/22px var(--schrift);
  --t-body:       400 17px/22px var(--schrift);
  --t-subhead:    400 15px/20px var(--schrift);
  --t-footnote:   400 13px/18px var(--schrift);
  --t-caption:    600 12px/16px var(--schrift);
  --caption-tracking:0.06em;

  /* ---- Formen und Maße ---- */
  --r-control:10px;    /* Eingabefelder, kleine Knöpfe */
  --r-pill:999px;      /* Chips, Primärknöpfe, Tab-Leiste */
  --r-card:12px;       /* Listengruppen */
  --r-sheet:20px;      /* Blätter von unten, obere Ecken */
  --r-thumb:12px;      /* Galerie-Kacheln */
  --radius:16px;       /* Bestand: Karten und Felder der heutigen Seiten */
  --touch:44px; --row:48px; --row-2line:60px;

  /* ---- Farben (hell) ---- */
  --bg:#ffffff;             /* Seiten-Grund */
  --karte:#f4f4f5;          /* Karten heben sich als helles Grau ab */
  --bg-group:#f2f2f7;       /* Fläche einer Listengruppe */
  --bg-elevated:#ffffff;    /* Blätter, Sheets, aktives Segment */
  --ink:#111113;            /* Schrift und alles Betonte */
  --leise:#8a8a8e;          /* Zweitrangiges */
  --line:#e8e8ea;           /* Haarlinien */
  --fuell:#ededef;          /* gefüllte Felder und Knöpfe */
  --fill:rgba(120,120,128,0.12);
  --fill-strong:rgba(120,120,128,0.2);
  --separator:rgba(60,60,67,0.2);
  --rot:#d70015;
  --schatten:none;

  /* Namen aus dem Plan, die auf Bestehendes zeigen — damit es die Farbe
     genau einmal gibt und nicht zweimal mit demselben Wert. */
  --label:var(--ink);
  --label-2:var(--leise);
  --label-3:rgba(60,60,67,0.3);
  --tint:var(--ink);        /* scin-Ton ist Schwarz, nicht Blau */
  --tint-on:#ffffff;        /* Schrift auf --tint */
  --destructive:var(--rot);

  /* ---- Glas (iOS 26): milchige Scheibe mit heller Kante ---- */
  --glas:rgba(255,255,255,.76);
  --glas-fill:var(--glas);                     /* Name aus dem Plan */
  --glas-kante:rgba(0,0,0,.06);
  --glas-schatten:0 8px 30px rgba(0,0,0,.13),0 1px 2px rgba(0,0,0,.05);
  --glas-innen:inset 0 1px 0 rgba(255,255,255,.85);
  --unschaerfe:saturate(200%) blur(38px);
  /* Drei Abstufungen derselben Scheibe: die Leiste soll durchsichtiger
     sein als der Chat-Fuß, und wo der Weichzeichner fehlt, muss sie fast
     deckend werden, damit Text darauf lesbar bleibt. */
  --glas-leicht:rgba(255,255,255,.34);
  --glas-weich:rgba(255,255,255,.92);
  --glas-deckend:rgba(255,255,255,.97);

  /* ---- Bewegung ---- */
  --ease:cubic-bezier(0.32,0.72,0,1);
  --t-press:120ms; --t-ui:220ms; --t-sheet:320ms;
  --press-scale:0.97;
}

/* ==========================================================================
   Personenfarben. --p-flaeche färbt Flächen (Chat-Blasen, Chips, Kreise),
   --p-schrift die Schrift darauf. Jede Person behält ihre Farbe, nachts
   nur dunkler mit hellerer Schrift — sonst wäre der Team-Chat zu dritt
   nicht mehr auf einen Blick auseinanderzuhalten.

   Diese hellen Werte stehen mit Absicht VOR den dunklen weiter unten:
   bei gleicher Stärke gewinnt die spätere Regel. Standen sie danach,
   blieben die Blasen auch nachts blassrosa.
   ========================================================================== */
.f-pink   {--p-flaeche:#fce8f3;--p-schrift:#a83a7d}
.f-violett{--p-flaeche:#ece7fb;--p-schrift:#6242bd}
.f-blau   {--p-flaeche:#e2eefb;--p-schrift:#2264a6}
.f-gruen  {--p-flaeche:#e3f2e8;--p-schrift:#2c7048}
.f-sand   {--p-flaeche:#f7ecdd;--p-schrift:#8a5a22}
.f-team   {--p-flaeche:#e9e9ec;--p-schrift:#6d6d72}
.f-todo   {--p-flaeche:#eeeef0;--p-schrift:#8a8a8e}
.f-abo    {--p-flaeche:#eaeef2;--p-schrift:#78838f}

/* „hell" schlaegt den Systemschalter — auch fuer die Bedienelemente des
   Browsers. Ohne diese Zeile bleibt ein Eingabefeld auf einer hellen Seite
   dunkel, weil es sich am color-scheme orientiert, nicht an den Farben. */
:root[data-thema="hell"]{color-scheme:light}
:root[data-thema="dunkel"]{color-scheme:dark}

/* ==========================================================================
   Dunkelmodus. Nur die Farben werden getauscht — Maße, Schrift und Zeiten
   bleiben. Was hier nicht steht, gilt unverändert aus den Blöcken oben.

   Zweimal notiert, mit Absicht: einmal für den Schalter des Systems und
   einmal für data-thema am <html>. Letzteres braucht /dev/ui, um beide
   Fassungen nebeneinander prüfen zu können, ohne das ganze Gerät
   umzustellen. „hell" schlägt dabei den Systemschalter.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root:not([data-thema="hell"]){
    --bg:#000000;
    --karte:#1c1c1e;
    --bg-group:#1c1c1e;
    --bg-elevated:#1c1c1e;
    --ink:#ffffff;
    --leise:rgba(235,235,245,0.6);
    --line:rgba(84,84,88,0.6);
    --fuell:rgba(120,120,128,0.24);
    --fill:rgba(120,120,128,0.24);
    --fill-strong:rgba(120,120,128,0.36);
    --separator:rgba(84,84,88,0.6);
    --label-3:rgba(235,235,245,0.3);
    /* Rot muss auf Schwarz heller sein, sonst verschwindet es */
    --rot:#ff453a;
    /* --tint zeigt auf --ink und wird damit weiß; die Schrift darauf schwarz */
    --tint-on:#000000;
    --glas:rgba(30,30,32,.7);
    --glas-kante:rgba(255,255,255,.08);
    --glas-innen:inset 0 1px 0 rgba(255,255,255,.12);
    --glas-leicht:rgba(28,28,30,.34);
    --glas-weich:rgba(20,20,22,.92);
    --glas-deckend:rgba(24,24,26,.97);
  }
  .f-pink   {--p-flaeche:#3a1f31;--p-schrift:#f5b8dc}
  .f-violett{--p-flaeche:#292140;--p-schrift:#c4b2f7}
  .f-blau   {--p-flaeche:#1b2c40;--p-schrift:#9ec8f5}
  .f-gruen  {--p-flaeche:#1c3226;--p-schrift:#a5dcbb}
  .f-sand   {--p-flaeche:#3a2e1e;--p-schrift:#e8c290}
  .f-team   {--p-flaeche:#2c2c2e;--p-schrift:#c7c7cc}
  .f-todo   {--p-flaeche:#2c2c2e;--p-schrift:#aeaeb2}
  .f-abo    {--p-flaeche:#252c33;--p-schrift:#b0bcc8}
}
:root[data-thema="dunkel"]{
    --bg:#000000;
    --karte:#1c1c1e;
    --bg-group:#1c1c1e;
    --bg-elevated:#1c1c1e;
    --ink:#ffffff;
    --leise:rgba(235,235,245,0.6);
    --line:rgba(84,84,88,0.6);
    --fuell:rgba(120,120,128,0.24);
    --fill:rgba(120,120,128,0.24);
    --fill-strong:rgba(120,120,128,0.36);
    --separator:rgba(84,84,88,0.6);
    --label-3:rgba(235,235,245,0.3);
    /* Rot muss auf Schwarz heller sein, sonst verschwindet es */
    --rot:#ff453a;
    /* --tint zeigt auf --ink und wird damit weiß; die Schrift darauf schwarz */
    --tint-on:#000000;
    --glas:rgba(30,30,32,.7);
    --glas-kante:rgba(255,255,255,.08);
    --glas-innen:inset 0 1px 0 rgba(255,255,255,.12);
    --glas-leicht:rgba(28,28,30,.34);
    --glas-weich:rgba(20,20,22,.92);
    --glas-deckend:rgba(24,24,26,.97);
}
[data-thema="dunkel"]{
  .f-pink   {--p-flaeche:#3a1f31;--p-schrift:#f5b8dc}
  .f-violett{--p-flaeche:#292140;--p-schrift:#c4b2f7}
  .f-blau   {--p-flaeche:#1b2c40;--p-schrift:#9ec8f5}
  .f-gruen  {--p-flaeche:#1c3226;--p-schrift:#a5dcbb}
  .f-sand   {--p-flaeche:#3a2e1e;--p-schrift:#e8c290}
  .f-team   {--p-flaeche:#2c2c2e;--p-schrift:#c7c7cc}
  .f-todo   {--p-flaeche:#2c2c2e;--p-schrift:#aeaeb2}
  .f-abo    {--p-flaeche:#252c33;--p-schrift:#b0bcc8}
}