/* Design System – Pferdbeere */
:root {
    /* Brand Colors */
    --color-accent-red:       #de0816;
    --color-accent-green:     #aecc32;
    --color-accent-olive:     #748811;
    --color-accent-yellow:    #e8c520;

    /* Backgrounds */
    --color-bg-primary:       #ffffff;
    --color-bg-secondary:     #f5f5f5;
    --color-bg-tertiary:      #eaeaea;
    --color-bg-card:          #ffffff;
    --color-bg-elevated:      #f0f0f0;

    /* Text */
    --color-text-primary:     #1a1a1a;
    --color-text-secondary:   #555555;
    --color-text-muted:       #999999;

    /* Borders */
    --color-border:           #e0e0e0;
    --color-border-light:     #d0d0d0;

    /* Status */
    --color-success:          #22c55e;
    --color-warning:          #f59e0b;
    --color-error:            #ef4444;
    --color-info:             #3b82f6;

    /* Typography */
    --font-primary:           'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-heading:           'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:              'IBM Plex Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;

    /* Spacing */
    --space-1:    0.25rem;
    --space-2:    0.5rem;
    --space-3:    0.75rem;
    --space-4:    1rem;
    --space-5:    1.25rem;
    --space-6:    1.5rem;
    --space-8:    2rem;
    --space-10:   2.5rem;
    --space-12:   3rem;
    --space-16:   4rem;
    --space-20:   5rem;

    /* Border Radius */
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  0.75rem;
    --radius-xl:  1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg:   0 10px 25px rgba(0,0,0,0.12);
    --shadow-glow-red:    0 0 20px rgba(222, 8, 22, 0.2);
    --shadow-glow-green:  0 0 20px rgba(174, 204, 50, 0.2);
    --shadow-glow-yellow: 0 0 20px rgba(232, 197, 32, 0.2);

    /* Floorplan SVG */
    --fp-bg: #f5f5f5;
    --fp-border: #d0d0d0;
    --fp-area-fill: #eaeaea;
    --fp-furniture: #d0d0d0;
    --fp-entrance-stroke: #888888;

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* Layout */
    --container-max:     1200px;
    --header-height:     70px;
    --sidebar-width:     260px;
}

@media (max-width: 768px) {
    :root {
        --header-height: 60px;
        --text-5xl:  2.25rem;
        --text-4xl:  1.875rem;
        --text-3xl:  1.5rem;
    }
}