/* ============================================================
   Designtokens – ZENTRALE Quelle fuer Farben, Abstaende, Typo.
   Keine hartkodierten Werte in app.css oder JS.
   Bewusst app-neutral gehalten, damit eine zweite App
   (ADHS/Aufgaben) dieselben Tokennamen uebernehmen kann.
   Farbe kommt AUSSCHLIESSLICH aus nutzerdefinierten
   Kategoriefarben, die zur Laufzeit inline gesetzt werden.
   ============================================================ */

:root {
  /* Basis-Palette: streng schwarz/weiss */
  --color-bg:            #000000;
  --color-fg:           #ffffff;
  --color-fg-muted:     #9a9a9a;   /* dezente Sekundaertexte */
  --color-fg-faint:     #5c5c5c;   /* sehr zurueckhaltend, Hinweise */
  --color-line:         #2a2a2a;   /* Trennlinien, Rahmen */
  --color-line-strong:  #444444;
  --color-surface:      #0d0d0d;   /* minimal abgesetzte Flaeche */
  --color-surface-2:    #161616;   /* Bottom-Sheet, Felder */
  --color-focus:        #ffffff;

  /* Abstands-Skala (8px-Basis) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* Typografie – reine Systemschriften, keine Web-Fonts */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Segoe UI Mono", Menlo,
               Consolas, monospace;

  /* Typo-Skala */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-huge: 64px;   /* Restbetrag: groesste Zahl */

  --leading-tight: 1.1;
  --leading-normal: 1.4;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  /* Form: klassisch-modern, keine Bonbon-Optik */
  --radius:      0px;      /* keine abgerundeten Ecken */
  --radius-full: 999px;    /* nur fuer echte Kreise (Farbpunkte) */
  --border:      1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);

  /* Bewusst KEINE Schatten, KEINE Verlaeufe. */
  --shadow: none;

  /* Interaktion */
  --tap-min: 44px;         /* Mindest-Trefferflaeche fuer den Daumen */
  --transition: 120ms ease;

  /* Layout */
  --content-max: 560px;    /* Handy-first, auf Desktop zentriert */
}