/* =====================================================================
   Quire · Marken
   Alle Gestaltungsentscheidungen an einer Stelle. Nichts weiter unten
   im Verzeichnis setzt eine Farbe oder Größe unmittelbar — alles zieht
   von hier.

   Herkunft der Gestaltung: eine „quire" ist die Lage gefalzter Bogen,
   aus der ein Buch gebunden wird. Farben kommen daher aus Buchbinder-
   leinen und Druckerschwärze, nicht aus einem Oberflächenbaukasten.
   ===================================================================== */

:root {

  /* ---------- Farbe ----------
     Sechs Werte, mehr braucht die App nicht. Das Grün ist der einzige
     Akzent: Buchbinderleinen, Flaschengrün. Es trägt Bestätigung,
     Fortschritt und die einzige tragende Schaltfläche je Bildschirm.
     Das Oxblood kommt aus derselben Stofffamilie und trägt
     ausschließlich Fehler und Löschungen. */

  --bogen:    #fbfbfa;   /* Papier. Warm um eine Spur, nicht cremig. */
  --lage:     #efefec;   /* Der Grund, auf dem die Bogen liegen. */
  --falz:     #e2e2dd;   /* Trennlinien, Ränder. */
  --tinte:    #1a1a18;   /* Schrift. Warmes Schwarz, kein reines #000. */
  --satz:     #6e6e66;   /* Nebentext. Verblasste Tinte, kein UI-Grau. 5,1:1 */
  --satz-2:   #74746c;   /* Beschriftungen, Zeitangaben. 4,7:1 — nicht heller
                            machen: darunter reißt der Kontrast für 13-px-Text
                            unter die WCAG-Schwelle von 4,5:1. */

  --leinen:   #1f4a3d;   /* Akzent. Flaschengrün. */
  --leinen-2: #eaf0ed;   /* Akzent als Fläche. */
  --oxblut:   #8c2f2a;   /* Fehler, Löschen. */
  --oxblut-2: #f8eeed;

  /* ---------- Schrift ----------
     Drei Rollen, alle aus dem System. Kein Webfont: das spart nicht nur
     Ladezeit, es hält auch die Content-Security-Policy eng — kein
     fremder Host im font-src.

     Der Kniff liegt in der Auszeichnungsschrift. Apple liefert auf jedem
     Gerät die New York mit, und fast keine Web-App benutzt sie. Genau
     deshalb tun wir es: sie ist das, was Quire von jeder anderen
     iOS-artigen Oberfläche unterscheidet. */

  --auszeichnung: ui-serif, "New York", Iowan Old Style, Palatino, Georgia, serif;
  --brot:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ziffer:       ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Stufen. Auszeichnung wird eng gesetzt, Brot normal. */
  --gr-titel:   34px;   --zl-titel:   1.12;   --sp-titel:   -.021em;
  --gr-kopf:    26px;   --zl-kopf:    1.18;   --sp-kopf:    -.018em;
  --gr-abschn:  20px;   --zl-abschn:  1.25;   --sp-abschn:  -.012em;
  --gr-brot:    17px;   --zl-brot:    1.47;
  --gr-neben:   15px;   --zl-neben:   1.4;
  --gr-klein:   13px;   --zl-klein:   1.35;

  /* ---------- Maß ----------
     Vierer-Raster. Alles ist ein Vielfaches davon, ohne Ausnahme. */

  --m1: 4px;  --m2: 8px;  --m3: 12px; --m4: 16px;
  --m5: 20px; --m6: 24px; --m8: 32px; --m10: 40px; --m12: 48px;

  --rand:      16px;   /* Seitenrand auf dem Telefon */
  --radius:    12px;   /* Karten */
  --radius-s:  8px;    /* Felder, Knöpfe */
  --leseweite: 34rem;  /* Zeilenlänge im Fließtext */

  --tableiste: calc(50px + env(safe-area-inset-bottom));
  --kopfleiste: 44px;

  /* ---------- Schatten ----------
     Genau zwei. Karten liegen fast flach auf; nur was schwebt, wirft
     etwas. */
  --heb-1: 0 1px 2px rgba(26,26,24,.05);
  --heb-2: 0 8px 28px rgba(26,26,24,.14);

  /* ---------- Bewegung ---------- */
  --zeit: 180ms;
  --kurve: cubic-bezier(.32,.72,0,1);   /* iOS-artig: schnell an, weich aus */
}

/* ---------- Dunkel ----------
   Kein invertiertes Hell, sondern derselbe Gedanke bei Nacht: Tinte auf
   Papier wird helle Schrift auf dunklem Leinen. Das Grün hellt auf,
   sonst verschwindet es. */

@media (prefers-color-scheme: dark) {
  :root {
    --bogen:    #1b1b19;
    --lage:     #111110;
    --falz:     #2e2e2a;
    --tinte:    #f2f2ee;
    --satz:     #a3a39a;   /* 6,8:1 */
    --satz-2:   #8a8a82;   /* 4,9:1 */

    --leinen:   #6fbba0;
    --leinen-2: #1b2f28;
    --oxblut:   #e0837c;
    --oxblut-2: #33201e;

    --heb-1: 0 1px 2px rgba(0,0,0,.4);
    --heb-2: 0 8px 28px rgba(0,0,0,.6);
  }
}