/*
 * Design-Tokens fuer Fotodoku.
 *
 * Quelle: UI-REFERENCE.md Abschnitt 2 (Farbtokens, Typografie, Spacing, Radius).
 * Diese Datei ist die EINZIGE Quelle der Wahrheit fuer Theme-Werte —
 * Komponenten-CSS referenziert ausschliesslich diese Variablen,
 * keine Hardcodings.
 *
 * Geschuetzt vor versehentlichem Override: alle Tokens unter :root,
 * keine Media-Queries (Dark-Theme ist Default und einziges Theme).
 */
:root {
    /* --- Farben (Brand + Surfaces) --- */
    --color-primary:        #e94560;
    --color-bg:             #1a1a2e;
    --color-surface:        #16213e;
    --color-surface-light:  #1f3056;
    --color-text:           #eee;
    --color-text-muted:     #999;

    /* --- Farben (Status / Semantik) --- */
    --color-success:        #4caf50;
    --color-warning:        #f0c040;
    --color-error:          #f44336;
    --color-info:           #5b8def;

    /* --- Linien / Borders ---
       Wird ueberall fuer 1px-Rahmen auf Surfaces benutzt. WICHTIG: Ohne dieses
       Token fiele jede `border: 1px solid var(--color-border)`-Deklaration
       komplett aus (invalid at computed-value time). */
    --color-border:         rgba(255, 255, 255, 0.12);

    /* --- Button-Typo (ReportPage nutzt das Token) --- */
    --font-size-button:     0.95rem;

    /* --- Sync-Indicator (4 Zustaende: Idle/Syncing/Synced/Offline/Error) --- */
    --color-sync-idle:      var(--color-text-muted);
    --color-sync-syncing:   var(--color-warning);
    --color-sync-synced:    var(--color-success);
    --color-sync-offline:   var(--color-error);

    /* --- Typografie --- */
    --font-family:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-h1:         1.15rem;
    --font-size-h2:         1.05rem;
    --font-size-body:       0.95rem;
    --font-size-badge:      0.8rem;
    --font-size-hint:       0.78rem;
    --font-weight-regular:  500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* --- Spacing (UI-REFERENCE 2.3) --- */
    --space-1:   4px;
    --space-2:   6px;
    --space-3:   8px;
    --space-4:  10px;
    --space-5:  12px;
    --space-6:  14px;
    --space-7:  16px;
    --space-8:  20px;
    --space-9:  24px;

    /* --- Radius --- */
    --radius-card:   10px;
    --radius-pill:   20px;
    --radius-circle: 50%;

    /* --- Layer-Stacking (UI-REFERENCE 1.2) --- */
    --z-header:    100;
    --z-tabs:       90;
    --z-preview:   160;
    --z-overlay:   200;
    --z-picker:    250;
    --z-toast:     300;

    /* --- Touch-Targets / Capture --- */
    --touch-min:    44px;
    --capture-size: 76px;

    /* --- Layout-Masse ---
       Reale Header-Hoehe (Touch-Target 44px + 2x Padding 14px + 2px Border).
       Von MainLayout (min-height) und StandortSubline (sticky-Offset) geteilt. */
    --header-height: 74px;

    /* --- Transitions --- */
    --transition-fast:   0.15s ease;
    --transition-medium: 0.3s ease;
}