/* ============================================================================
   E-KAFA PIUMS - Design Tokens (CSS Variables)
   Consolidated from ekafa-custom.css, site.css, and inline styles
   ============================================================================ */

:root {
      /* Fix: Add missing variables for layout and gradients */
      --ekafa-gradient: linear-gradient(90deg, #00a86b 0%, #11684d 100%);
      --bg-white: #fff;
      --bg-lighter: #f9fafb;
      --ekafa-secondary: #00a86b;
    /* ========================================
       Brand Colors
       ======================================== */
    --ekafa-primary: #004135;

    /* Islamic-inspired accent colors */
    --islamic-gold: #c9a227;
    --islamic-gold-light: #e5c35c;
    --islamic-dark: #1a3a32;
    --ekafa-primary-light: #11684d;
    --ekafa-primary-dark: #002820;
    --ekafa-accent: #00a86b;
    --ekafa-accent-light: #00c77f;
    --ekafa-accent-dark: #059669;

    /* ========================================
       Gradient Presets
       ======================================== */
    --gradient-header: linear-gradient(135deg, #004135 0%, #11684d 50%, #00a86b 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-success-light: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-danger-light: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-warning-light: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --gradient-info-light: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    --gradient-purple-light: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);

    /* ========================================
       Status Colors
       ======================================== */
    --status-success: #10b981;
    --status-success-dark: #059669;
    --status-success-light: #d1fae5;
    --status-success-text: #065f46;

    --status-danger: #ef4444;
    --status-danger-dark: #dc2626;
    --status-danger-light: #fee2e2;
    --status-danger-text: #991b1b;

    --status-warning: #f59e0b;
    --status-warning-dark: #d97706;
    --status-warning-light: #fef3c7;
    --status-warning-text: #92400e;

    --status-info: #3b82f6;
    --status-info-dark: #2563eb;
    --status-info-light: #dbeafe;
    --status-info-text: #1e40af;

    /* ========================================
       Neutral Gray Scale
       ======================================== */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Legacy aliases (for backward compatibility) */
    --ekafa-gray-50: var(--gray-50);
    --ekafa-gray-100: var(--gray-100);
    --ekafa-gray-200: var(--gray-200);
    --ekafa-gray-300: var(--gray-300);
    --ekafa-gray-400: var(--gray-400);
    --ekafa-gray-500: var(--gray-500);
    --ekafa-gray-600: var(--gray-600);
    --ekafa-gray-700: var(--gray-700);
    --ekafa-gray-800: var(--gray-800);
    --ekafa-gray-900: var(--gray-900);

    /* Legacy status aliases */
    --ekafa-success: var(--status-success);
    --ekafa-danger: var(--status-danger);
    --ekafa-warning: var(--status-warning);
    --ekafa-info: var(--status-info);

    /* ========================================
       Text Colors (High Contrast - WCAG AA)
       ======================================== */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;
    --text-white: #ffffff;
    --text-white-soft: #f9fafb;

    /* ========================================
       Background Colors
       ======================================== */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-tertiary: #f9fafb;
    --bg-dark: #1f2937;

    /* ========================================
       Sidebar Colors
       ======================================== */
    --sidebar-bg: #001f15;
    --sidebar-text: #e5e7eb;
    --sidebar-text-hover: #ffffff;
    --sidebar-active: #00b377;
    --sidebar-hover-bg: rgba(0, 179, 119, 0.15);

    /* ========================================
       Navbar Colors
       ======================================== */
    --navbar-bg: #003829;
    --navbar-text: #ffffff;

    /* ========================================
       Spacing Scale
       ======================================== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 2.5rem;   /* 40px */
    --spacing-3xl: 3rem;     /* 48px */

    /* ========================================
       Border Radius
       ======================================== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 50px;
    --radius-circle: 50%;

    /* ========================================
       Shadows
       ======================================== */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.1);

    /* ========================================
       Transitions
       ======================================== */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* ========================================
       Border Colors
       ======================================== */
    --border-light: #e5e7eb;
    --border-default: #d1d5db;
    --border-dark: #9ca3af;
    --border-success: #a7f3d0;
    --border-warning: #fcd34d;
    --border-danger: #fca5a5;

    /* ========================================
       Icon Background Colors (for stat cards)
       ======================================== */
    --icon-bg-students: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --icon-color-students: #1e40af;

    --icon-bg-teachers: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --icon-color-teachers: #92400e;

    --icon-bg-receipts: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    --icon-color-receipts: #991b1b;

    --icon-bg-activities: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    --icon-color-activities: #065f46;

    --icon-bg-registrations: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
    --icon-color-registrations: #6b21a8;

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