/**
 * Barakah CSS Variables
 * BMW Premium Islamic design system with dark sage green and luxurious gold
 */

:root {
  /* ============================================
     COLORS - Premium Dark Islamic Palette
     ============================================ */

  /* Dark Sage Green Backgrounds - BMW Premium Style */
  --bg: #0F1F1A;           /* Deep dark sage green background */
  --bg-secondary: #1A2D26;  /* Secondary dark green */
  --bg-tertiary: #1F3F35;   /* Lighter dark green for contrast */

  /* Primary Islamic Green */
  --primary: #2D5F4F;
  --primary-dark: #1F3F35;
  --primary-light: #476B5C;
  --primary-lighter: #6B8A7A;

  /* Premium Gold - Brighter and more luxurious */
  --gold: #D4AF37;          /* Bright premium gold */
  --gold-light: #E8C76A;    /* Light gold for highlights */
  --gold-dark: #C9A961;     /* Muted gold for depth */
  --gold-shimmer: #F5E6C8;  /* Shimmer effect */

  /* Card Colors - Light on dark for premium feel */
  --card: #FFFFFF;
  --card-hover: #F8F9FA;
  --card-dark: #1E2F2A;     /* Deep green-tinted dark cards */
  --card-dark-hover: #243833;

  /* Text Colors */
  --text: #E8E8E8;          /* Light text for dark backgrounds */
  --text-secondary: #B8B8B8;
  --text-muted: #888888;
  --text-light: #FFFFFF;
  --text-dark: #2A2A2A;     /* For light cards */
  --text-dark-secondary: #4A4A4A;

  /* Semantic Colors */
  --success: #4CAF50;
  --error: #EF4444;
  --warning: #FFA726;
  --info: #42A5F5;

  /* Border Colors */
  --border: #2A3F37;
  --border-light: #374F46;
  --border-dark: #1A2920;


  /* ============================================
     SPACING SCALE
     ============================================ */

  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */


  /* ============================================
     TYPOGRAPHY
     ============================================ */

  /* Font Families */
  --font-primary: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Amiri', 'Scheherazade', serif;

  /* 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-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;


  /* ============================================
     LAYOUT
     ============================================ */

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-full: 9999px;  /* Full circle */

  /* Premium Layered Shadows - BMW Style */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(0, 0, 0, 0.25);

  /* Gold Glow Effects */
  --glow-gold: 0 0 20px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.15);
  --glow-gold-intense: 0 0 30px rgba(212, 175, 55, 0.5), 0 0 60px rgba(212, 175, 55, 0.25), 0 0 90px rgba(212, 175, 55, 0.1);

  /* Green-tinted shadows for depth */
  --shadow-green: 0 8px 32px rgba(31, 63, 53, 0.4), 0 4px 16px rgba(31, 63, 53, 0.3);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* Z-index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;


  /* ============================================
     BREAKPOINTS (for reference in media queries)
     ============================================ */

  /*
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  */
}