/* css/core/variables.css - Toutes les variables CSS centralisées */

:root {
    /* Colors - Dark Theme (Tavola Style) */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #334155;
    --bg-hover: #475569;
    --bg-modal: rgba(0, 0, 0, 0.5);
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-muted: #475569;
    --text-inverse: #000000;
    
    --primary: #2563eb;
    --primary-rgb: 37, 99, 235;
    --primary-hover: #1d4ed8;
    --primary-light: rgba(37, 99, 235, 0.1);
    --primary-dark: #1e40af;
    
    --accent: #f59e0b;
    --accent-rgb: 245, 158, 11;
    
    --success: #059669;
    --success-dark: #047857;
    --success-light: rgba(5, 150, 105, 0.1);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    --error: #dc2626;
    --error-dark: #b91c1c;
    --error-light: rgba(220, 38, 38, 0.1);
    --info: #0ea5e9;
    --info-light: rgba(14, 165, 233, 0.1);
    
    /* Table Status Colors */
    --table-available: #059669;
    --table-reserved: #2563eb;
    --table-occupied: #f59e0b;
    --table-late: #dc2626;
    --table-cleaning: #8b5cf6;
    --table-unavailable: #64748b;
    
    /* Dashboard semantic colors */
    --reservations-color: #3b82f6;    /* Bleu pour réservations */
    --occupation-color: #f59e0b;      /* Orange pour occupation */
    --covers-color: #10b981;          /* Vert pour couverts */
    --revenue-color: #8b5cf6;         /* Violet pour revenus */
    --alert-color: #ef4444;           /* Rouge pour alertes */
    --performance-color: #06b6d4;     /* Cyan pour performance */
    --neutral-color: #6b7280;         /* Gris neutre */
    
    /* Border Colors */
    --border-color: #475569;
    --border-light: #334155;
    --border-hover: #64748b;
    --border-medium: #475569;
    --border-dark: #64748b;
    
    /* Layout Dimensions */
    --header-height: 0px;
    --sidebar-width: 280px;
    --sidebar-collapsed: 70px;
    --fab-size: 56px;
    --modal-max-width: 600px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.1);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-round: 50%;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    
    /* Typography - Material Design 3 Typography Scale */
    --font-family-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono: 'Roboto Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
    
    /* Material Design 3 Typography Scale */
    --md-sys-typescale-display-large-size: 3.5625rem;      /* 57px */
    --md-sys-typescale-display-large-weight: 400;
    --md-sys-typescale-display-large-line-height: 4rem;    /* 64px */
    
    --md-sys-typescale-display-medium-size: 2.8125rem;     /* 45px */
    --md-sys-typescale-display-medium-weight: 400;
    --md-sys-typescale-display-medium-line-height: 3.25rem; /* 52px */
    
    --md-sys-typescale-display-small-size: 2.25rem;        /* 36px */
    --md-sys-typescale-display-small-weight: 400;
    --md-sys-typescale-display-small-line-height: 2.75rem; /* 44px */
    
    --md-sys-typescale-headline-large-size: 2rem;          /* 32px */
    --md-sys-typescale-headline-large-weight: 400;
    --md-sys-typescale-headline-large-line-height: 2.5rem; /* 40px */
    
    --md-sys-typescale-headline-medium-size: 1.75rem;      /* 28px */
    --md-sys-typescale-headline-medium-weight: 400;
    --md-sys-typescale-headline-medium-line-height: 2.25rem; /* 36px */
    
    --md-sys-typescale-headline-small-size: 1.5rem;        /* 24px */
    --md-sys-typescale-headline-small-weight: 400;
    --md-sys-typescale-headline-small-line-height: 2rem;   /* 32px */
    
    --md-sys-typescale-title-large-size: 1.375rem;         /* 22px */
    --md-sys-typescale-title-large-weight: 400;
    --md-sys-typescale-title-large-line-height: 1.75rem;   /* 28px */
    
    --md-sys-typescale-title-medium-size: 1rem;            /* 16px */
    --md-sys-typescale-title-medium-weight: 500;
    --md-sys-typescale-title-medium-line-height: 1.5rem;   /* 24px */
    
    --md-sys-typescale-title-small-size: 0.875rem;         /* 14px */
    --md-sys-typescale-title-small-weight: 500;
    --md-sys-typescale-title-small-line-height: 1.25rem;   /* 20px */
    
    --md-sys-typescale-label-large-size: 0.875rem;         /* 14px */
    --md-sys-typescale-label-large-weight: 500;
    --md-sys-typescale-label-large-line-height: 1.25rem;   /* 20px */
    
    --md-sys-typescale-label-medium-size: 0.75rem;         /* 12px */
    --md-sys-typescale-label-medium-weight: 500;
    --md-sys-typescale-label-medium-line-height: 1rem;     /* 16px */
    
    --md-sys-typescale-label-small-size: 0.6875rem;        /* 11px */
    --md-sys-typescale-label-small-weight: 500;
    --md-sys-typescale-label-small-line-height: 1rem;      /* 16px */
    
    --md-sys-typescale-body-large-size: 1rem;              /* 16px */
    --md-sys-typescale-body-large-weight: 400;
    --md-sys-typescale-body-large-line-height: 1.5rem;     /* 24px */
    
    --md-sys-typescale-body-medium-size: 0.875rem;         /* 14px */
    --md-sys-typescale-body-medium-weight: 400;
    --md-sys-typescale-body-medium-line-height: 1.25rem;   /* 20px */
    
    --md-sys-typescale-body-small-size: 0.75rem;           /* 12px */
    --md-sys-typescale-body-small-weight: 400;
    --md-sys-typescale-body-small-line-height: 1rem;       /* 16px */
    
    /* Legacy Typography Variables (for backward compatibility) */
    --font-size-xs: var(--md-sys-typescale-body-small-size);
    --font-size-sm: var(--md-sys-typescale-body-medium-size);
    --font-size-base: var(--md-sys-typescale-body-large-size);
    --font-size-lg: var(--md-sys-typescale-title-large-size);
    --font-size-xl: var(--md-sys-typescale-headline-small-size);
    --font-size-2xl: var(--md-sys-typescale-headline-medium-size);
    --font-size-3xl: var(--md-sys-typescale-headline-large-size);
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;
    
    /* Material Symbols - Icon Variables */
    --md-icon-size-small: 18px;
    --md-icon-size-medium: 24px;
    --md-icon-size-large: 32px;
    --md-icon-size-xlarge: 48px;
    
    /* Material Symbols Font Settings */
    --md-icon-font-family: 'Material Symbols Outlined';
    --md-icon-font-weight: 400;
    --md-icon-font-style: normal;
    --md-icon-font-display: block;
    --md-icon-font-feature-settings: 'liga';
    --md-icon-font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    
    /* Material Icons Mapping */
    --icon-dashboard: 'dashboard';
    --icon-restaurant: 'restaurant';
    --icon-calendar: 'calendar_month';
    --icon-people: 'people';
    --icon-settings: 'settings';
    --icon-search: 'search';
    --icon-edit: 'edit';
    --icon-delete: 'delete';
    --icon-add: 'add';
    --icon-refresh: 'refresh';
    --icon-check: 'check';
    --icon-close: 'close';
    --icon-warning: 'warning';
    --icon-error: 'error';
    --icon-info: 'info';
    --icon-arrow-back: 'arrow_back';
    --icon-arrow-forward: 'arrow_forward';
    --icon-arrow-up: 'arrow_upward';
    --icon-arrow-down: 'arrow_downward';
    --icon-chevron-left: 'chevron_left';
    --icon-chevron-right: 'chevron_right';
    --icon-more-vert: 'more_vert';
    --icon-filter: 'filter_list';
    --icon-sort: 'sort';
    --icon-visibility: 'visibility';
    --icon-visibility-off: 'visibility_off';
    --icon-phone: 'phone';
    --icon-email: 'email';
    --icon-location: 'location_on';
    --icon-schedule: 'schedule';
    --icon-group: 'group';
    --icon-person: 'person';
    --icon-event: 'event';
    --icon-today: 'today';
    --icon-analytics: 'analytics';
    --icon-trending-up: 'trending_up';
    --icon-trending-down: 'trending_down';
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}

/* Light Theme Override */
[data-theme="light"] {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f1f3f4;
    --bg-modal: rgba(255, 255, 255, 0.95);
    
    --text-primary: #1a1b1e;
    --text-secondary: #5f6368;
    --text-muted: #9aa0a6;
    --text-inverse: #ffffff;
    
    --border-light: #e9ecef;
    --border-medium: #dee2e6;
    --border-dark: #adb5bd;
    
    /* Adjust shadows for light theme */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.16);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.08);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
        --transition-slow: 0s;
        --transition-bounce: 0s;
    }
}