/**
 * Projekt:      CRM Markisenkeydel
 * Datei:        variables.css
 * Beschreibung: CSS Custom Properties – Farben, Typografie, Abstände
 * Entwickler:   Jörg Hennig - hnng.it
 * Version:      1.0.0
 * Lizenz:       Proprietär – © 2026 MK Markisenkeydel
 */

:root {
    /* --- Farben --- */
    --farbe-hintergrund:        #F5F3F0;
    --farbe-hintergrund-karte:  #FFFFFF;
    --farbe-rahmen:             #E0DCD7;
    --farbe-rahmen-stark:       #C8C4BE;

    --farbe-text:               #2D2D2D;
    --farbe-text-gedaempft:     #6B6560;
    --farbe-text-hell:          #9A9590;

    --farbe-akzent:             #D4572A;
    --farbe-akzent-dunkel:      #B8461E;
    --farbe-akzent-hell:        #F0E6E0;

    /* Prio-Farben */
    --prio-nr:                  #BFBBB6;
    --prio-kann:                #5A8A5E;
    --prio-soll:                #C49A2A;
    --prio-muss:                #D4572A;
    --prio-offen:               #6B8BA4;

    /* Status-Farben */
    --farbe-erfolg:             #3D7A42;
    --farbe-erfolg-hell:        #E8F4E9;
    --farbe-fehler:             #C0392B;
    --farbe-fehler-hell:        #FDEDED;
    --farbe-warnung:            #C49A2A;
    --farbe-warnung-hell:       #FDF6E3;
    --farbe-info:               #2980B9;
    --farbe-info-hell:          #EBF5FB;

    /* Sidebar */
    --sidebar-hintergrund:      #2D2D2D;
    --sidebar-text:             #E0DCD7;
    --sidebar-text-gedaempft:   #9A9590;
    --sidebar-aktiv:            #D4572A;
    --sidebar-hover:            #3D3D3D;
    --sidebar-rahmen:           #444444;

    /* --- Typografie --- */
    --schrift-sans:             'DM Sans', system-ui, sans-serif;
    --schrift-mono:             'DM Mono', 'Courier New', monospace;

    --schrift-basis:            1rem;        /* 16px */
    --schrift-klein:            0.875rem;    /* 14px */
    --schrift-sehr-klein:       0.75rem;     /* 12px */
    --schrift-gross:            1.125rem;    /* 18px */
    --schrift-h1:               clamp(1.5rem, 2.5vw, 2rem);
    --schrift-h2:               clamp(1.25rem, 2vw, 1.5rem);
    --schrift-h3:               clamp(1.1rem, 1.5vw, 1.25rem);

    --zeilenhoehe:              1.6;
    --zeilenhoehe-eng:          1.3;

    /* --- Abstände (8px-Raster) --- */
    --abstand-xs:               0.25rem;   /* 4px */
    --abstand-sm:               0.5rem;    /* 8px */
    --abstand-md:               1rem;      /* 16px */
    --abstand-lg:               1.5rem;    /* 24px */
    --abstand-xl:               2rem;      /* 32px */
    --abstand-xxl:              3rem;      /* 48px */

    /* --- Layout --- */
    --sidebar-breite:           260px;
    --header-hoehe:             64px;
    --footer-hoehe:             48px;
    --inhalt-max-breite:        900px;
    --rahmen-radius:            4px;
    --rahmen-radius-gross:      8px;

    /* --- Übergänge --- */
    --uebergang-schnell:        150ms ease;
    --uebergang-normal:         250ms ease;

    /* --- Schatten --- */
    --schatten-karte:           0 1px 3px rgba(0, 0, 0, 0.08);
    --schatten-hoch:            0 4px 12px rgba(0, 0, 0, 0.12);
}