/**
 * UR WooCommerce Style - CSS Variablen
 * 
 * Design-System basierend auf uhrenratgeber.net
 * Elegantes Dark-Theme mit weinroten Akzenten
 */

:root {
    /* ========================================
       PRIMÄRFARBEN (Weinrot)
       ======================================== */
    --ur-primary: #a51b34;
    --ur-primary-light: #c42040;
    --ur-primary-dark: #8a1629;
    --ur-primary-rgb: 165, 27, 52;
    
    /* ========================================
       HINTERGRUNDFARBEN (Dark Mode)
       ======================================== */
    --ur-bg-dark: #111827;
    --ur-bg-darker: #0f172a;
    --ur-bg-card: #1f2937;
    --ur-bg-card-hover: #374151;
    --ur-bg-input: #1e293b;
    
    /* ========================================
       GRAUTÖNE
       ======================================== */
    --ur-gray-900: #111827;
    --ur-gray-800: #1f2937;
    --ur-gray-700: #374151;
    --ur-gray-600: #4b5563;
    --ur-gray-500: #6b7280;
    --ur-gray-400: #9ca3af;
    --ur-gray-300: #d1d5db;
    --ur-gray-200: #e5e7eb;
    --ur-gray-100: #f3f4f6;
    --ur-gray-50: #f9fafb;
    
    /* ========================================
       TEXTFARBEN
       ======================================== */
    --ur-text-primary: #f9fafb;
    --ur-text-secondary: #d1d5db;
    --ur-text-muted: #9ca3af;
    --ur-text-dark: #111827;
    
    /* ========================================
       STATUSFARBEN
       ======================================== */
    --ur-success: #10b981;
    --ur-success-light: #34d399;
    --ur-warning: #f59e0b;
    --ur-warning-light: #fbbf24;
    --ur-error: #ef4444;
    --ur-error-light: #f87171;
    --ur-info: #3b82f6;
    --ur-info-light: #60a5fa;
    
    /* ========================================
       PREISE & SALES
       ======================================== */
    --ur-price: #f9fafb;
    --ur-price-sale: #ef4444;
    --ur-price-old: #6b7280;
    --ur-badge-sale: #ef4444;
    --ur-badge-new: #10b981;
    --ur-badge-hot: #f59e0b;
    
    /* ========================================
       SCHRIFTEN
       ======================================== */
    --ur-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ur-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Font Sizes */
    --ur-text-xs: 0.75rem;      /* 12px */
    --ur-text-sm: 0.875rem;     /* 14px */
    --ur-text-base: 1rem;       /* 16px */
    --ur-text-lg: 1.125rem;     /* 18px */
    --ur-text-xl: 1.25rem;      /* 20px */
    --ur-text-2xl: 1.5rem;      /* 24px */
    --ur-text-3xl: 1.875rem;    /* 30px */
    --ur-text-4xl: 2.25rem;     /* 36px */
    
    /* Font Weights */
    --ur-font-light: 300;
    --ur-font-normal: 400;
    --ur-font-medium: 500;
    --ur-font-semibold: 600;
    --ur-font-bold: 700;
    --ur-font-extrabold: 800;
    
    /* ========================================
       ABSTÄNDE (Spacing)
       ======================================== */
    --ur-space-1: 0.25rem;      /* 4px */
    --ur-space-2: 0.5rem;       /* 8px */
    --ur-space-3: 0.75rem;      /* 12px */
    --ur-space-4: 1rem;         /* 16px */
    --ur-space-5: 1.25rem;      /* 20px */
    --ur-space-6: 1.5rem;       /* 24px */
    --ur-space-8: 2rem;         /* 32px */
    --ur-space-10: 2.5rem;      /* 40px */
    --ur-space-12: 3rem;        /* 48px */
    --ur-space-16: 4rem;        /* 64px */
    
    /* ========================================
       BORDER RADIUS
       ======================================== */
    --ur-radius-sm: 4px;
    --ur-radius-md: 8px;
    --ur-radius-lg: 12px;
    --ur-radius-xl: 16px;
    --ur-radius-2xl: 24px;
    --ur-radius-full: 9999px;
    
    /* ========================================
       SCHATTEN
       ======================================== */
    --ur-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ur-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --ur-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --ur-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    --ur-shadow-glow: 0 0 20px rgba(var(--ur-primary-rgb), 0.3);
    --ur-shadow-glow-lg: 0 0 40px rgba(var(--ur-primary-rgb), 0.4);
    
    /* ========================================
       ÜBERGÄNGE (Transitions)
       ======================================== */
    --ur-transition-fast: 0.15s ease;
    --ur-transition-base: 0.2s ease;
    --ur-transition-medium: 0.3s ease;
    --ur-transition-slow: 0.5s ease;
    
    /* ========================================
       Z-INDEX EBENEN
       ======================================== */
    --ur-z-dropdown: 100;
    --ur-z-sticky: 200;
    --ur-z-modal: 300;
    --ur-z-tooltip: 400;
    --ur-z-toast: 500;
    
    /* ========================================
       LAYOUT
       ======================================== */
    --ur-container-max: 1400px;
    --ur-sidebar-width: 300px;
    --ur-header-height: 80px;
}

/* ========================================
   LIGHT MODE ÜBERSCHREIBUNGEN
   (Falls jemand lieber helles Design möchte)
   ======================================== */
body.ur-wc-styled:not(.ur-dark-mode) {
    --ur-bg-dark: #ffffff;
    --ur-bg-darker: #f9fafb;
    --ur-bg-card: #ffffff;
    --ur-bg-card-hover: #f3f4f6;
    --ur-bg-input: #ffffff;
    
    --ur-text-primary: #111827;
    --ur-text-secondary: #374151;
    --ur-text-muted: #6b7280;
    
    --ur-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ur-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --ur-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}