/**
 * Design Tokens - ONG NAMA
 * Single source of truth for all design variables
 * Version: 1.0.0
 */

:root {
    /* ==============================================
       COULEURS PRIMAIRES - Thème Vert ONG
       ============================================== */
    --color-primary: #205030;
    --color-primary-light: #2e7d46;
    --color-primary-dark: #1a4028;
    --color-primary-50: #e8f5e9;
    --color-primary-100: #c8e6c9;
    --color-primary-200: #a5d6a7;

    --color-secondary: #70a040;
    --color-secondary-light: #8bc34a;
    --color-secondary-dark: #558b2f;

    --color-accent: #503020;
    --color-accent-light: #6d4c41;
    --color-accent-dark: #3e2723;

    /* ==============================================
       COULEURS SÉMANTIQUES
       ============================================== */
    --color-success: #28a745;
    --color-success-light: #48c774;
    --color-success-soft: rgba(40, 167, 69, 0.1);

    --color-warning: #ffc107;
    --color-warning-light: #ffcd39;
    --color-warning-soft: rgba(255, 193, 7, 0.1);

    --color-danger: #dc3545;
    --color-danger-light: #e57373;
    --color-danger-soft: rgba(220, 53, 69, 0.1);

    --color-info: #17a2b8;
    --color-info-light: #4fc3f7;
    --color-info-soft: rgba(23, 162, 184, 0.1);

    /* ==============================================
       COULEURS NEUTRES
       ============================================== */
    --color-white: #ffffff;
    --color-black: #000000;

    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    /* Surface colors */
    --color-surface: #f5f5f2;
    --color-surface-elevated: #ffffff;
    --color-surface-muted: #f8f9fa;

    /* Text colors */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-text-inverse: #ffffff;

    /* Border colors */
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-border-dark: #cbd5e1;

    /* ==============================================
       ESPACEMENTS (Échelle de 4px)
       ============================================== */
    --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;

    /* ==============================================
       BORDER RADIUS
       ============================================== */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* ==============================================
       OMBRES
       ============================================== */
    --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 rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

    /* Card shadows */
    --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.12);

    /* Colored shadows */
    --shadow-primary: 0 4px 14px rgba(32, 80, 48, 0.25);
    --shadow-success: 0 4px 14px rgba(40, 167, 69, 0.25);

    /* ==============================================
       TRANSITIONS
       ============================================== */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ==============================================
       TYPOGRAPHIE
       ============================================== */
    --font-sans: 'Manrope', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Sora', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Fira Code', 'Consolas', monospace;

    /* Font sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 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-light: 300;
    --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;

    /* ==============================================
       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;

    /* ==============================================
       BREAKPOINTS (pour référence JS)
       ============================================== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* ==============================================
       ANIMATIONS
       ============================================== */
    --animation-spin: spin 1s linear infinite;
    --animation-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animation-bounce: bounce 1s infinite;
}

/* ==============================================
   SUPPORT RTL (Arabe)
   ============================================== */
[dir="rtl"] {
    --font-sans: 'Noto Sans Arabic', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Noto Sans Arabic', 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==============================================
   THÈME SOMBRE (optionnel, pour futur usage)
   ============================================== */
@media (prefers-color-scheme: dark) {
    :root.auto-dark {
        --color-surface: #1a1a2e;
        --color-surface-elevated: #252542;
        --color-text-primary: #f1f5f9;
        --color-text-secondary: #94a3b8;
        --color-border: #334155;
    }
}

/* ==============================================
   ANIMATIONS KEYFRAMES
   ============================================== */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

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

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes skeleton-loading {
    0% { background-color: var(--color-gray-200); }
    50% { background-color: var(--color-gray-300); }
    100% { background-color: var(--color-gray-200); }
}

/* ==============================================
   UTILITY CLASSES (Couleurs Soft Background)
   ============================================== */
.bg-primary-soft { background-color: var(--color-primary-50) !important; }
.bg-success-soft { background-color: var(--color-success-soft) !important; }
.bg-warning-soft { background-color: var(--color-warning-soft) !important; }
.bg-danger-soft { background-color: var(--color-danger-soft) !important; }
.bg-info-soft { background-color: var(--color-info-soft) !important; }

.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-info { color: var(--color-info) !important; }