/* Design-Tokens.
 *
 * Die Catppuccin-Farben bleiben - sie gefallen Moritz. Neu ist das System
 * darunter: vorher waren Abstaende, Schriftgroessen und Radien freie
 * px-Literale (neun verschiedene Radien, sieben Schriftgroessen), und vier
 * Farbwerte liefen am Token-System vorbei.
 *
 * Zielbild: Notion, Capacities, Craft. Farbe ist Information, nicht Struktur.
 */

:root {
  /* Flaechen */
  --bg: #11111b;
  --surface-1: #181825;
  --surface-2: #1e1e2e;
  --surface-3: #252538;
  --surface-4: #313244;

  /* Text - Ruhe ist eine Tokenstufe, kein Opacity-Regler */
  --fg: #cdd6f4;
  --fg-muted: #a6adc8;
  --fg-subtle: #6c7086;
  --fg-strong: #eef1ff;

  /* --- Vier Bedeutungsachsen, kein Farbwert in zweien ------------------
   *
   * Moritz am 2026-07-31: "Next und Kontext haben genau die gleiche lila
   * Magentafarbe. Warum? Wie ist das klare Farbkonzept?" - berechtigt, und
   * der Befund war groesser als gemeldet. Vier Werte standen doppelt:
   * --st-next == --relation, --st-waiting == --st-paused,
   * --prio-low == --accent == --st-open und --tag == --st-in-progress.
   *
   * Achse 1  Status      Lebenszyklus, Rampe grau -> kuehl -> warm -> gruen
   * Achse 2  Beziehung   Entitaeten, Projekte, Kontexte - eine eigene Familie
   * Achse 3  Tags        neutral gedaempft, nie ein Bedeutungston
   * Achse 4  Prioritaet  nur als Randmarke, nie als Flaechenfarbe
   * Dazu     Akzent      die Oberflaeche selbst (Knoepfe, Links)
   *
   * Farbe traegt nie allein: Status hat zusaetzlich den Punkt, Prioritaet die
   * Randmarke, Tags und Entitaeten unterscheiden sich in der Chipform. Das
   * ist keine Kosmetik - ein Achtel der Maenner sieht Rot und Gruen anders,
   * und ein Farbsystem, das nur ueber Farbton arbeitet, faellt dort aus.
   *
   * Wer hier etwas aendert: check_design.py prueft, dass kein Hexwert in zwei
   * Achsen vorkommt, und wird rot.
   */

  /* Akzent - die Oberflaeche, keine Bedeutungsachse */
  --accent: #89b4fa;
  --accent-soft: rgba(137, 180, 250, 0.12);
  --accent-border: rgba(137, 180, 250, 0.38);
  --on-accent: #11111b;

  /* Achse 2: Beziehung */
  --relation: #cba6f7;
  --relation-soft: rgba(203, 166, 247, 0.12);
  --relation-border: rgba(203, 166, 247, 0.28);

  /* Achse 3: Tags - bewusst neutral. Ein Tag sagt "wozu gehoert das",
     nicht "wie dringend" - er soll nicht mit Status um Aufmerksamkeit
     ringen. Vorher trug er das Teal von in-progress. */
  --tag: #9399b2;
  --tag-soft: rgba(147, 153, 178, 0.10);
  --tag-border: rgba(147, 153, 178, 0.28);

  /* Haarlinien statt Vollgrau - das ist der groesste Teil des Notion-Eindrucks */
  --line: rgba(205, 214, 244, 0.10);
  --line-strong: rgba(205, 214, 244, 0.18);

  /* Achse 4: Prioritaet. Nur high und medium tragen Farbe - das ist die
     Entscheidung, die man sehen muss. low und none bleiben still, sonst
     leuchtet die Liste ueberall und nirgends. */
  --prio-high: #f38ba8;
  --prio-medium: #fab387;
  --prio-low: #74c7ec;
  --prio-none: #45475a;

  /* Achse 1: Status - alle acht kanonischen Werte, als Lebenszyklus lesbar.
     backlog und next sind grau (liegt herum, kein Datum), open und
     in-progress kuehl (eingeplant, laeuft), waiting und paused warm
     (haengt), done gruen, cancelled fast unsichtbar. */
  --st-backlog: #6c7086;
  --st-next: #7f849c;
  --st-open: #89dceb;
  --st-in-progress: #94e2d5;
  --st-waiting: #f9e2af;
  --st-paused: #f2cdcd;
  --st-done: #a6e3a1;
  --st-cancelled: #585b70;

  --danger: #f38ba8;
  --warn: #fab387;
  --ok: #a6e3a1;

  /* Abstaende: 4er-Basis. Kein rohes px mehr an Abstandspositionen. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Typografie: UI 13, Prosa 15 */
  --fs-micro: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 28px;
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --lh-prose: 1.7;
  --tracking-label: 0.06em;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Radien: vier statt neun */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-full: 999px;

  /* Schatten nur fuer wirklich schwebende Flaechen */
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* Zeilenhoehen je Dichte - ~35 Prozent mehr Zeilen bei gleicher Information */
  --row-ultracompact: 24px;
  --row-compact: 28px;
  --row-normal: 34px;

  --measure-app: 1440px;
  --measure-prose: 72ch;

  --dur: 140ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}