/**
 * CSS-Variablen
 * Warmes Creme mit Golden-Bronze Akzenten
 * PrimeNG-inspiriertes Design
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    /* Primärfarben - Golden-Bronze */
    --primary-color: #B8860B;
    --primary-dark: #996F0A;
    --primary-light: #D4A84B;
    --secondary-color: #CD853F;
    --accent-color: #C9A227;

    /* Kontext-Farben - Kupfer/Bronze Abstufungen */
    --family-color: #B87333;
    --business-color: #CD7F32;
    --friend-color: #D4A574;
    --family-color: #D4A574;
    --business-color: #D4A574;

    /* Güteklassen-Farben - Hellblau Abstufungen */
    --quality-1: #1efff8;
    --quality-2: #1bdfd9;
    --quality-3: #0d5978;
    --quality-4: #044a53;

    /* UI-Farben - Warmes Creme */
    --background: #FDF8F3;
    --surface: #FFFFFF;
    --surface-alt: #FAF5EF;
    --text-primary: #3D3229;
    --text-secondary: #6B5D4D;
    --text-light: #9A8B7A;
    --border-color: #E0D5C8;
    --border-light: #EBE4DA;

    /* Abstände - Kompakt */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;

    /* Border Radius - Leicht abgerundet */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-full: 50%;

    /* Schatten - Minimal (PrimeNG-Stil) */
    --shadow-sm: 0 1px 2px rgba(61, 50, 41, 0.04);
    --shadow-md: 0 1px 3px rgba(61, 50, 41, 0.08);
    --shadow-lg: 0 2px 4px rgba(61, 50, 41, 0.1);

    /* Animationen */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Z-Index */
    --z-content: 1;
    --z-topbar: 100;
    --z-bottomnav: 100;
    --z-modal: 200;
    --z-overlay: 300;
    --z-toast: 400;

    /* Touch-Größen */
    --touch-target: 36px;
    --touch-target-lg: 44px;

    /* Layout */
    --topbar-height: 48px;
    --bottomnav-height: 52px;
    --max-width: 1200px;

    /* Schriftart */
    --font-family: 'Lora', Georgia, 'Times New Roman', serif;
}