/* SmartBooks — Design-System Tokens (Phase A) */

/* ═══════════════════════════════════════
   BREAKPOINTS (nur als Kommentar — CSS-Vars sind nicht in Media Queries nutzbar)
   sm: 640px | md: 768px | lg: 1024px | xl: 1280px
   ═══════════════════════════════════════ */

:root {
    /* ── Farben (Dark, zinc-tinted) ─────────────────────────── */
    --bg-base:          #09090B;
    --bg-elevated:      #111113;
    --bg-overlay:       #18181B;
    --bg-hover:         #1F1F23;

    --border-subtle:    #27272A;
    --border-default:   #3F3F46;
    --border-strong:    #52525B;

    --text-primary:     #FAFAFA;
    --text-secondary:   #A1A1AA;
    --text-muted:       #71717A;
    --text-disabled:    #52525B;

    --accent-primary:   #6366F1;
    --accent-hover:     #818CF8;
    --accent-muted:     #312E81;

    --success:          #10B981;
    --success-bg:       rgba(16, 185, 129, 0.12);
    --warning:          #F59E0B;
    --warning-bg:       rgba(245, 158, 11, 0.12);
    --danger:           #EF4444;
    --danger-bg:        #7F1D1D;
    --info:             #3B82F6;
    --info-bg:          #1E3A8A;

    /* ── Farbige Flaechen (Dichte-/Farb-Ueberarbeitung 2026-07-29) ──────────
       Bisher trugen Karten ihre Bedeutung fast nur ueber Graustufen. Diese Tokens
       geben Kopfzeilen, Kennzahlen und Statusflaechen eine eigene Farbe, ohne die
       Lesbarkeit anzutasten — alle Flaechen bleiben dunkel genug fuer weissen Text. */
    --surface-header:   linear-gradient(180deg, #1B1B20 0%, #141418 100%);
    --surface-accent:   linear-gradient(135deg, rgba(99,102,241,0.14), rgba(99,102,241,0.04));
    --surface-success:  linear-gradient(135deg, rgba(16,185,129,0.14), rgba(16,185,129,0.04));
    --surface-warning:  linear-gradient(135deg, rgba(245,158,11,0.14), rgba(245,158,11,0.04));
    --surface-danger:   linear-gradient(135deg, rgba(239,68,68,0.14), rgba(239,68,68,0.04));

    /* Akzentlinie am oberen Kartenrand — traegt die Zuordnung auf einen Blick */
    --accent-line:      linear-gradient(90deg, var(--accent-primary), #A78BFA);

    /* ── Spacing (8pt-Grid) ─────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  28px;
    --space-7:  40px;
    --space-8:  64px;

    /* ── Border-Radius ──────────────────────────────────────── */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;

    /* ── Shadows (Dark-Mode: softer) ────────────────────────── */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans:  'Inter', 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:  'JetBrains Mono', 'Geist Mono', 'Fira Code', monospace;

    /* ── Schriftgewichte ────────────────────────────────────────
       Bisher standen Gewichte verstreut als Zahlen im CSS. Als Token werden sie
       vergleichbar und lassen sich an einer Stelle nachjustieren. */
    --fw-normal:    400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    /* ── Font-Sizes ─────────────────────────────────────────── */
    --fs-xs:    12px;
    --fs-sm:    14px;
    --fs-base:  16px;
    --fs-lg:    18px;
    --fs-xl:    20px;
    --fs-2xl:   24px;
    --fs-3xl:   32px;

    /* ── Aliase: bestehende Variablen → neue Tokens ─────────── */
    /* WICHTIG: Diese Aliase erhalten die Rückwärtskompatibilität.
       Alle bestehenden Templates funktionieren weiterhin. */
    --bg-primary:    var(--bg-base);          /* alias → --bg-base */
    --bg-secondary:  var(--bg-elevated);      /* alias → --bg-elevated */
    --bg-tertiary:   var(--bg-overlay);       /* alias → --bg-overlay */
    --border-color:  var(--border-default);   /* alias → --border-default */
    --accent:        var(--accent-primary);   /* alias → --accent-primary */
    --error:         var(--danger);           /* alias → --danger */
    --error-bg:      var(--danger-bg);        /* alias → --danger-bg */
    --radius:        var(--radius-md);        /* alias → --radius-md */
    --accent-bg:     rgba(99, 102, 241, 0.1); /* accent-muted transparent */

    /* success-bg/warning-bg: rgba statt Volltonflaeche — wirkt im Dark Theme als
       dezenter Tint hinter Badges/Alerts/Toasts, nicht als eigener Farbblock.
       Einzige Quelle der Wahrheit (vormals zusaetzlich in style.css ueberschrieben). */
}