/*
 * COMPAX Design System - Tokens
 * ==============================
 * Single source of truth dla wszystkich wartości CSS.
 * Używaj tych zmiennych zamiast hardkodowanych wartości.
 * 
 * Aktualizacja: grudzień 2024
 */

:root {
    /* =========================================
       KOLORY - BRAND
       ========================================= */
    --c-primary: #c9a227;
    --c-primary-hover: #b8931f;
    --c-primary-light: rgba(201, 162, 39, 0.12);
    --c-primary-dark: #a68820;

    /* Brand Navy - used for sidebar */
    --brand-navy: #1a365d;
    --brand-navy-dark: #0f2442;
    --brand-navy-light: #2d4a73;
    --gradient-brand: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-dark));
    
    /* =========================================
       KOLORY - SEMANTIC
       ========================================= */
    --c-success: #22c55e;
    --c-success-hover: #16a34a;
    --c-success-light: rgba(34, 197, 94, 0.12);
    --c-success-bg: rgba(34, 197, 94, 0.08);
    --c-success-dark: #15803d;
    
    --c-danger: #ef4444;
    --c-danger-hover: #dc2626;
    --c-danger-light: rgba(239, 68, 68, 0.12);
    --c-danger-bg: rgba(239, 68, 68, 0.08);
    --c-danger-dark: #b91c1c;
    
    --c-warning: #f59e0b;
    --c-warning-hover: #d97706;
    --c-warning-light: rgba(245, 158, 11, 0.12);
    --c-warning-bg: rgba(245, 158, 11, 0.08);
    --c-warning-dark: #b45309;
    
    --c-info: #3b82f6;
    --c-info-hover: #2563eb;
    --c-info-light: rgba(59, 130, 246, 0.12);
    --c-info-bg: rgba(59, 130, 246, 0.08);
    --c-info-dark: #1d4ed8;
    
    /* Aliasy (error = danger, dla kompatybilności) */
    --c-error: var(--c-danger);
    --c-error-hover: var(--c-danger-hover);
    --c-error-light: var(--c-danger-light);
    --c-error-bg: var(--c-danger-bg);
    --c-error-dark: var(--c-danger-dark);
    
    /* Primary background */
    --c-primary-bg: rgba(201, 162, 39, 0.08);
    
    /* =========================================
       KOLORY - NEUTRAL (Light Mode)
       ========================================= */
    --c-bg-primary: #ffffff;
    --c-bg-secondary: #f8fafc;
    --c-bg-tertiary: #f1f5f9;
    --c-bg-hover: #f1f5f9;
    
    --c-border: #e2e8f0;
    --c-border-hover: #cbd5e1;
    --c-border-focus: var(--c-primary);
    
    --c-text-primary: #1e293b;
    --c-text-secondary: #64748b;
    --c-text-muted: #94a3b8;
    --c-text-inverse: #ffffff;
    
    /* =========================================
       SPACING
       ========================================= */
    --space-0: 0;
    --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: 48px;
    --space-16: 64px;
    
    /* Aliasy semantyczne */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-12);
    
    /* =========================================
       TYPOGRAPHY
       ========================================= */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
    
    /* Rozmiary */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-md: 14px;
    --text-base: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 30px;
    
    /* Wagi */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Wysokość linii */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.75;
    
    /* =========================================
       BORDER RADIUS
       ========================================= */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;
    
    /* =========================================
       SHADOWS
       ========================================= */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-focus: 0 0 0 3px rgba(201, 162, 39, 0.25);
    
    /* =========================================
       TRANSITIONS
       ========================================= */
    --transition-fast: 100ms ease;
    --transition-normal: 150ms ease;
    --transition-slow: 250ms ease;
    --transition-slower: 350ms ease;
    
    /* =========================================
       Z-INDEX
       ========================================= */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    
    /* =========================================
       KOMPONENTY - ROZMIARY
       ========================================= */
    
    /* Buttons */
    --btn-height-sm: 32px;
    --btn-height-md: 38px;
    --btn-height-lg: 46px;
    --btn-font-sm: var(--text-sm);
    --btn-font-md: var(--text-md);
    --btn-font-lg: var(--text-base);
    --btn-padding-sm: 0 12px;
    --btn-padding-md: 0 16px;
    --btn-padding-lg: 0 24px;
    --btn-radius: var(--radius-lg);
    --btn-icon-size-sm: 14px;
    --btn-icon-size-md: 16px;
    --btn-icon-size-lg: 18px;
    
    /* Inputs */
    --input-height-sm: 32px;
    --input-height-md: 40px;
    --input-height-lg: 48px;
    --input-padding-x: 12px;
    --input-font: var(--text-md);
    --input-radius: var(--radius-lg);
    --input-border: 1px solid var(--c-border);
    --input-border-focus: 1px solid var(--c-primary);
    
    /* Cards */
    --card-padding: var(--space-5);
    --card-radius: var(--radius-xl);
    --card-border: 1px solid var(--c-border);
    --card-shadow: var(--shadow-sm);
    
    /* Modals */
    --modal-width-sm: 400px;
    --modal-width-md: 540px;
    --modal-width-lg: 720px;
    --modal-width-xl: 900px;
    --modal-radius: var(--radius-xl);
    --modal-padding: var(--space-6);
    
    /* Badges */
    --badge-height-sm: 20px;
    --badge-height-md: 24px;
    --badge-font-sm: 10px;
    --badge-font-md: 11px;
    --badge-padding-sm: 0 6px;
    --badge-padding-md: 0 10px;
    --badge-radius: var(--radius-md);
    
    /* Tables */
    --table-header-bg: var(--c-bg-secondary);
    --table-row-hover: var(--c-bg-tertiary);
    --table-cell-padding: 12px 16px;
    --table-border: 1px solid var(--c-border);
    
    /* =========================================
       ALIASY KOMPATYBILNOŚCI
       ========================================= */
    /* Dla zachowania kompatybilności z istniejącym kodem */
    --brand-gold: var(--c-primary);
    --brand-primary: var(--c-primary);
    --bg-primary: var(--c-bg-primary);
    --bg-secondary: var(--c-bg-secondary);
    --bg-card: var(--c-bg-primary);
    --bg-hover: var(--c-bg-hover);
    --text-primary: var(--c-text-primary);
    --text-secondary: var(--c-text-secondary);
    --text-muted: var(--c-text-muted);
    --border-color: var(--c-border);
    --danger: var(--c-danger);
    --success: var(--c-success);
    --warning: var(--c-warning);
    --info: var(--c-info);
    --success-bg: var(--c-success-light);
    --danger-bg: var(--c-danger-light);
    --warning-bg: var(--c-warning-light);
    --info-bg: var(--c-info-light);
}

/* =========================================
   DARK MODE
   ========================================= */
html.admin-dark-mode {
    /* Tła */
    --c-bg-primary: #0f172a;
    --c-bg-secondary: #1e293b;
    --c-bg-tertiary: #334155;
    --c-bg-hover: #334155;
    
    /* Ramki */
    --c-border: #334155;
    --c-border-hover: #475569;
    --c-border-strong: #64748b;
    
    /* Tekst - pełna skala dla kontrastu w dark mode */
    --c-text-primary: #f1f5f9;
    --c-text-secondary: #e2e8f0;
    --c-text-muted: #a8b5c4;
    --c-text-faint: #7d8a99;
    
    /* Karty i cienie */
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
    
    /* Focus ring - jaśniejszy dla widoczności */
    --shadow-focus: 0 0 0 3px rgba(201, 162, 39, 0.4);
    
    /* Brand - nieco jaśniejszy w dark mode */
    --c-primary: #d4af37;
    --c-primary-hover: #c9a227;
    --c-primary-light: rgba(212, 175, 55, 0.2);
    
    /* Semantic colors - jaśniejsze dla kontrastu */
    --c-success: #34d399;
    --c-success-hover: #22c55e;
    --c-success-light: rgba(52, 211, 153, 0.2);
    --c-success-bg: rgba(52, 211, 153, 0.15);
    --c-success-dark: #10b981;
    
    --c-danger: #f87171;
    --c-danger-hover: #ef4444;
    --c-danger-light: rgba(248, 113, 113, 0.2);
    --c-danger-bg: rgba(248, 113, 113, 0.15);
    --c-danger-dark: #ef4444;
    
    --c-warning: #fbbf24;
    --c-warning-hover: #f59e0b;
    --c-warning-light: rgba(251, 191, 36, 0.2);
    --c-warning-bg: rgba(251, 191, 36, 0.15);
    --c-warning-dark: #f59e0b;
    
    --c-info: #60a5fa;
    --c-info-hover: #3b82f6;
    --c-info-light: rgba(96, 165, 250, 0.2);
    --c-info-bg: rgba(96, 165, 250, 0.15);
    --c-info-dark: #3b82f6;
    
    /* Aliasy (error = danger) */
    --c-error: var(--c-danger);
    --c-error-hover: var(--c-danger-hover);
    --c-error-light: var(--c-danger-light);
    --c-error-bg: var(--c-danger-bg);
    --c-error-dark: var(--c-danger-dark);
    
    /* Primary background */
    --c-primary-bg: rgba(212, 175, 55, 0.15);
    
    /* Badge colors for dark mode */
    --success-text: #34d399;
    --danger-text: #f87171;
    --warning-text: #fbbf24;
    --info-text: #60a5fa;
    
    /* Card specific */
    --card-bg: #1e293b;
    --card-bg-highlight: #263548;
    --card-border: #334155;
    
    /* Input specific */
    --input-bg: #1e293b;
    --input-border: #475569;
    --input-text: #f8fafc;
    --input-placeholder: #64748b;
    
    /* Button specific - dark mode - HIGH CONTRAST */
    --btn-outline-border: var(--c-border-strong);
    --btn-outline-text: var(--c-text-primary);
    --btn-outline-hover-bg: var(--c-bg-tertiary);
    --btn-outline-hover-border: var(--c-text-muted);
    --btn-outline-hover-text: var(--c-text-primary);
    --btn-ghost-text: var(--c-text-primary);
    --btn-ghost-hover-text: var(--c-text-primary);
    --btn-secondary-bg: var(--c-bg-tertiary);
    --btn-secondary-text: var(--c-text-primary);
    --btn-secondary-hover-bg: var(--c-border-hover);
    
    /* Table specific */
    --table-header-bg: var(--c-bg-tertiary);
    --table-row-bg: var(--c-bg-secondary);
    --table-row-hover: var(--card-bg-highlight);
    --table-row-stripe: rgba(255, 255, 255, 0.02);
    --table-text: var(--c-text-primary);
    --table-header-text: var(--c-text-secondary);
    
    /* Aliasy kompatybilności - dark */
    --bg-primary: var(--c-bg-primary);
    --bg-secondary: var(--c-bg-secondary);
    --bg-card: var(--c-bg-secondary);
    --bg-hover: var(--c-bg-hover);
    --text-primary: var(--c-text-primary);
    --text-secondary: var(--c-text-secondary);
    --text-muted: var(--c-text-muted);
    --border-color: var(--c-border);
    --text-on-dark: #0f172a;
    
    /* Brand Navy - gradients */
    --brand-navy: #1a365d;
    --brand-navy-dark: #0f2442;
    --brand-navy-light: #2d4a73;
    --gradient-brand: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-dark));
    
    /* Role semantic colors */
    --role-admin-bg: var(--c-warning-bg);
    --role-admin-text: #92400e;
    --role-manager-bg: var(--c-info-bg);
    --role-manager-text: #1e40af;
    --role-sales-bg: var(--c-success-bg);
    --role-sales-text: #065f46;
    --role-support-bg: #e0e7ff;
    --role-support-text: #3730a3;
    --role-viewer-bg: #f3f4f6;
    --role-viewer-text: #4b5563;
    
    /* Status semantic colors */
    --status-active-bg: var(--c-success-bg);
    --status-active-text: #065f46;
    --status-inactive-bg: #f3f4f6;
    --status-inactive-text: #6b7280;
    --status-locked-bg: var(--c-danger-bg);
    --status-locked-text: #991b1b;
    --status-warning-bg: var(--c-warning-bg);
    --status-warning-text: #92400e;
}