/* ============================================================================
   Design-System: Theme Tokens (Phase 9)
   ----------------------------------------------------------------------------
   EINZIGE Quelle für Farben/Abstände/Schatten/Typografie. Komponenten in
   components.css und Theme-CSS in app/services/themes.py konsumieren NUR
   diese Tokens. Niemals Inline-Hex-Werte in Templates — gegen den DRY-/
   Theme-Switch-Workflow.

   Theme-Aktivierung: das body-Element bekommt `class="theme-<key>"`
   (siehe layouts/public.html). Themes überschreiben pro Token; alle
   nicht überschriebenen Tokens bleiben auf den :root-Defaults (clean).
============================================================================ */

:root {
    /* ---------- Farben ---------- */
    --c-primary:           #1e3a8a;
    --c-primary-contrast:  #ffffff;
    --c-primary-light:     #2e4ba0;
    --c-accent:            #c9a24c;
    --c-accent-contrast:   #1a1a1a;

    --c-bg:                #f5f7fa;
    --c-surface:           #ffffff;
    --c-surface-alt:       #f8fafc;

    --c-text:              #0f172a;
    --c-text-muted:        #64748b;
    --c-text-inverse:      #ffffff;

    --c-border:            #e2e8f0;
    --c-border-strong:     #cbd5e1;

    --c-success:           #16a34a;
    --c-success-bg:        #f0fdf4;
    --c-warning:           #eab308;
    --c-warning-bg:        #fefce8;
    --c-danger:            #dc2626;
    --c-danger-bg:         #fef2f2;
    --c-info:              #0ea5e9;
    --c-info-bg:           #f0f9ff;

    /* ---------- Radius ---------- */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ---------- Shadows ---------- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.12);

    /* ---------- Typography ---------- */
    --font-body:    system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-heading: var(--font-body);
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;          /* Body-Default */
    --text-md:   15px;          /* Alias für --text-base, Abwärtskompatibilität */
    --text-lg:   17px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  30px;

    --leading-normal:   1.5;
    --leading-relaxed:  1.65;

    /* ---------- Spacing ---------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 56px;

    /* ---------- Layout ---------- */
    --container-width: 1200px;
    --content-width:   720px;
    --sidebar-width:   240px;
    --header-height:   64px;
}

/* ============================================================================
   Theme-Varianten — überschreiben nur die Tokens, die sich vom Default
   unterscheiden. Komponenten brauchen keine theme-spezifischen Regeln.
============================================================================ */

/* clean → bereits :root-Defaults */

/* official: business-/behördentauglich, neutralerer Blauton */
.theme-official {
    --c-primary:        #1e3a5f;
    --c-primary-light:  #2c5080;
    --c-accent:         #0ea5e9;
    --c-bg:             #eef2f7;
    --c-surface-alt:    #f1f5f9;
    --radius-md:        4px;     /* schärfere Kanten */
    --radius-lg:        6px;
}

/* dark: dunkler Hintergrund + helle Cards, gute Lesbarkeit */
.theme-dark {
    --c-primary:           #6ad6ff;
    --c-primary-contrast:  #0b1220;
    --c-accent:            #a584ff;
    --c-bg:                #0b1220;
    --c-surface:           #111827;
    --c-surface-alt:       #1f2937;
    --c-text:              #e2e8f0;
    --c-text-muted:        #94a3b8;
    --c-border:            #1f2937;
    --c-border-strong:     #334155;
    --c-info-bg:           #0f1a2c;
    --c-success-bg:        #0a1f12;
    --c-warning-bg:        #2c2310;
    --c-danger-bg:         #2b1416;
}

/* premium: Magazin-/Apple-Look, Serifen für Headings */
.theme-premium {
    --c-primary:        #b08b36;
    --c-primary-light:  #d4af37;
    --c-accent:         #7c5e1f;
    --c-bg:             #fdfbf6;
    --c-surface:        #ffffff;
    --c-surface-alt:    #faf5e8;
    --font-heading:     "Times New Roman", Georgia, serif;
    --radius-md:        6px;
    --shadow-md:        0 8px 28px rgba(124, 94, 31, 0.10);
}

/* minimal: sehr reduziert, fast plain-text */
.theme-minimal {
    --c-primary:        #111827;
    --c-accent:         #374151;
    --c-bg:             #ffffff;
    --c-surface-alt:    #f9fafb;
    --c-border:         #d1d5db;
    --radius-md:        0;
    --radius-lg:        0;
    --shadow-sm:        none;
    --shadow-md:        none;
    --shadow-lg:        0 1px 0 rgba(0,0,0,0.04);
}

/* event_theme → wird DYNAMISCH in layouts/public.html aus
   event.brand_primary / brand_accent / brand_background gesetzt:
       <style>:root { --c-primary: …; --c-accent: …; --c-bg: …; }</style>
   Damit ist event_theme nur ein Marker, kein Override-Block hier. */