/**
 * ============================================
 * ALNOTRA DESIGN SYSTEM - DESIGN TOKENS
 * Cloud Console Vercel-like
 * ============================================
 * 
 * Ce fichier contient toutes les variables CSS du design system.
 * Inspiré du module OpenStack et du style Vercel.
 * 
 * Usage: Importer ce fichier en premier dans layout_default.html.twig
 */

/* ===== ROOT VARIABLES - LIGHT THEME ===== */
:root {
    /* === COLORS - Brand === */
    --al-primary: #0081c5;
    --al-primary-dark: #006699;
    --al-primary-light: #0081c5;
    --al-primary-subtle: rgba(0,129,197, 0.1);
    
    /* === COLORS - Semantic === */
    --al-accent: #00d4aa;
    --al-accent-dark: #00b894;
    --al-success: #10b981;
    --al-success-light: #d1fae5;
    --al-success-dark: #059669;
    --al-warning: #f5a623;
    --al-warning-light: #fef3c7;
    --al-warning-dark: #d97706;
    --al-error: #ef4444;
    --al-error-light: #fee2e2;
    --al-error-dark: #dc2626;
    --al-info: #0070f3;
    --al-info-light: #e0f2fe;
    --al-info-dark: #0284c7;
    
    /* === COLORS - Neutrals === */
    --al-bg: #fafafa;
    --al-bg-subtle: #f5f5f5;
    --al-surface: #ffffff;
    --al-surface-hover: #f9f9f9;
    --al-surface-active: #f3f3f3;
    --al-text: #000000;
    --al-text-secondary: #666666;
    --al-text-muted: #888888;
    --al-text-disabled: #a3a3a3;
    --al-border: #eaeaea;
    --al-border-strong: #d4d4d4;
    --al-border-subtle: #f0f0f0;
    
    /* === COLORS - Algeria Theme === */
    --al-green-dz: #006233;
    --al-red-dz: #d21034;
    
    /* === 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;
    --space-20: 80px;
    --space-24: 96px;
    
    /* Aliases sémantiques */
    --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);
    --space-3xl: var(--space-16);
    
    /* === BORDER RADIUS === */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
    
    /* === TYPOGRAPHY === */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.8125rem;    /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md: 1rem;         /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    
    /* === SHADOWS === */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 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.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    
    /* Shadow with brand color */
    --shadow-primary: 0 4px 14px rgba(0,129,197, 0.25);
    --shadow-success: 0 4px 14px rgba(16, 185, 129, 0.25);
    --shadow-error: 0 4px 14px rgba(239, 68, 68, 0.25);
    
    /* === TRANSITIONS === */
    --transition-fast: 0.1s ease;
    --transition-base: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.5s ease;
    
    /* Specific transitions */
    --transition-colors: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    --transition-transform: transform 0.15s ease;
    --transition-opacity: opacity 0.15s ease;
    --transition-shadow: box-shadow 0.15s ease;
    --transition-all: all 0.15s ease;
    
    /* === Z-INDEX === */
    --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;
    
    /* === LAYOUT === */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1470px;
    
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;
    --header-height: 64px;
    --footer-height: 80px;
    
    /* === COMPONENT SPECIFIC === */
    /* Buttons */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    --btn-padding-sm: 0 12px;
    --btn-padding-md: 0 16px;
    --btn-padding-lg: 0 24px;
    
    /* Inputs */
    --input-height-sm: 32px;
    --input-height-md: 40px;
    --input-height-lg: 48px;
    --input-padding: 0 12px;
    --input-border-width: 1px;
    
    /* Cards */
    --card-padding: var(--space-6);
    --card-radius: var(--radius-xl);
    --card-border: 1px solid var(--al-border);
    
    /* Tables */
    --table-cell-padding: var(--space-3) var(--space-4);
    --table-header-bg: var(--al-bg-subtle);
    
    /* Badges */
    --badge-padding: 4px 10px;
    --badge-radius: var(--radius-full);
    --badge-font-size: var(--text-xs);
}

/* ===== DARK THEME ===== */
[data-bs-theme="dark"],
[data-theme="dark"],
.dark {
    /* Colors - Neutrals inverted */
    --al-bg: #0a0a0a;
    --al-bg-subtle: #111111;
    --al-surface: #171717;
    --al-surface-hover: #1f1f1f;
    --al-surface-active: #262626;
    --al-text: #ededed;
    --al-text-secondary: #a1a1a1;
    --al-text-muted: #737373;
    --al-text-disabled: #525252;
    --al-border: #2e2e2e;
    --al-border-strong: #404040;
    --al-border-subtle: #1f1f1f;
    
    /* Adjusted semantic colors for dark */
    --al-primary-subtle: rgba(0,129,197, 0.2);
    --al-success-light: rgba(16, 185, 129, 0.15);
    --al-warning-light: rgba(245, 166, 35, 0.15);
    --al-error-light: rgba(239, 68, 68, 0.15);
    --al-info-light: rgba(0, 112, 243, 0.15);
    
    /* Shadows for dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

/* ===== UTILITY CLASSES FROM TOKENS ===== */

/* Background Colors */
.bg-surface { background-color: var(--al-surface); }
.bg-subtle { background-color: var(--al-bg-subtle); }
.bg-primary { background-color: var(--al-primary); }
.bg-primary-subtle { background-color: var(--al-primary-subtle); }
.bg-success { background-color: var(--al-success); }
.bg-success-light { background-color: var(--al-success-light); }
.bg-warning { background-color: var(--al-warning); }
.bg-warning-light { background-color: var(--al-warning-light); }
.bg-error { background-color: var(--al-error); }
.bg-error-light { background-color: var(--al-error-light); }

/* Text Colors */
.text-primary { color: var(--al-text); }
.text-secondary { color: var(--al-text-secondary); }
.text-muted { color: var(--al-text-muted); }
.text-disabled { color: var(--al-text-disabled); }
.text-brand { color: var(--al-primary); }
.text-success { color: var(--al-success); }
.text-warning { color: var(--al-warning); }
.text-error { color: var(--al-error); }

/* Border Colors */
.border-default { border-color: var(--al-border); }
.border-strong { border-color: var(--al-border-strong); }
.border-subtle { border-color: var(--al-border-subtle); }
.border-primary { border-color: var(--al-primary); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-primary { box-shadow: var(--shadow-primary); }

/* Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Transitions */
.transition-all { transition: var(--transition-all); }
.transition-colors { transition: var(--transition-colors); }
.transition-transform { transition: var(--transition-transform); }
.transition-opacity { transition: var(--transition-opacity); }

/* ===== KEYFRAME ANIMATIONS ===== */

@keyframes al-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes al-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes al-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes al-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes al-slide-up {
    from { 
        opacity: 0;
        transform: translateY(10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes al-slide-down {
    from { 
        opacity: 0;
        transform: translateY(-10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes al-scale-in {
    from { 
        opacity: 0;
        transform: scale(0.95);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes al-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes al-progress-pulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0,129,197, 0.3);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 6px 25px rgba(0,129,197, 0.4);
    }
}

/* Animation utility classes */
.animate-spin { animation: al-spin 1s linear infinite; }
.animate-pulse { animation: al-pulse 2s ease-in-out infinite; }
.animate-bounce { animation: al-bounce 2s ease-in-out infinite; }
.animate-fade-in { animation: al-fade-in 0.3s ease-out; }
.animate-slide-up { animation: al-slide-up 0.3s ease-out; }
.animate-slide-down { animation: al-slide-down 0.3s ease-out; }
.animate-scale-in { animation: al-scale-in 0.2s ease-out; }

/* ===== BASE RESETS WITH TOKENS ===== */

*, *::before, *::after {
    box-sizing: border-box;
}

body.al-theme {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--al-text);
    background-color: var(--al-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus ring utility */
.focus-ring:focus,
.focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--al-surface), 0 0 0 4px var(--al-primary);
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}