/* ========================================
   NEBRAS QURAN - DESIGN SYSTEM VARIABLES
   ======================================== */

:root {
  /* ============ COLORS ============ */
  
  /* Primary Colors */
  --color-primary: #0f6d3f;           /* rich emerald */
  --color-primary-dark: #0a3f2b;      /* deep forest */
  --color-primary-light: #1f8c5a;     /* vibrant hero panels */
  --color-primary-lighter: #3bb27a;   /* soft gradients */
  
  /* Secondary Colors */
  --color-secondary: #f6f0e4;         /* warm parchment */
  --color-secondary-dark: #d3c2a3;    /* accents + cards */
  
  /* Accent Colors */
  --color-accent-green: #b8e6a1;
  --color-accent-green-dark: #9ed57f;
  --color-accent-gold: #f4c066;
  --color-accent-gold-dark: #7b4a12;
  --color-accent-lime: #e4fb9d;
  --color-accent-blue: #1d6dd6;
  
  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #0b1c16;
  --color-muted: #f7f8f3;
  --color-muted-dark: #101a17;
  
  /* Text Colors */
  --color-text-primary: #142e1f;
  --color-text-secondary: #4d5d57;
  --color-text-muted: #8c998f;
  --color-text-light: #e5ede4;
  --color-text-white: #ffffff;
  
  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-muted: #f6f3eb;
  --color-bg-dark: #0f2018;
  --color-bg-hero-dark: #0d4b35;
  --color-bg-hero-darker: #072b1f;
  
  /* Border Colors */
  --color-border-light: rgba(15, 109, 63, 0.08);
  --color-border-medium: rgba(10, 63, 43, 0.12);
  --color-border-dark: rgba(20, 46, 31, 0.08);
  
  /* ============ TYPOGRAPHY ============ */
  
  /* Font Families */
  --font-primary: 'Satoshi-Variable', 'Satoshi-Regular', 'Satoshi-Medium', 'Satoshi-Light', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
  
  /* Font Sizes - Headings */
  --font-size-h1: 2.8rem;        /* 44.8px */
  --font-size-h2: 2.4rem;        /* 38.4px */
  --font-size-h3: 2rem;          /* 32px */
  --font-size-h4: 1.5rem;        /* 24px */
  --font-size-h5: 1.25rem;       /* 20px */
  --font-size-h6: 1rem;          /* 16px */
  
  /* Font Sizes - Body */
  --font-size-base: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;      /* 18px */
  --font-size-sm: 0.9rem;        /* 14.4px */
  --font-size-xs: 0.85rem;       /* 13.6px */
  --font-size-xxs: 0.8rem;       /* 12.8px */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 2;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;
  
  /* ============ SPACING ============ */
  
  /* Padding */
  --padding-xs: 0.25rem;         /* 4px */
  --padding-sm: 0.5rem;          /* 8px */
  --padding-md: 1rem;            /* 16px */
  --padding-lg: 1.5rem;          /* 24px */
  --padding-xl: 2rem;            /* 32px */
  --padding-2xl: 3rem;           /* 48px */
  --padding-3xl: 4rem;           /* 64px */
  --padding-4xl: 5rem;           /* 80px */
  
  /* Margin */
  --margin-xs: 0.25rem;          /* 4px */
  --margin-sm: 0.5rem;           /* 8px */
  --margin-md: 1rem;             /* 16px */
  --margin-lg: 1.5rem;           /* 24px */
  --margin-xl: 2rem;             /* 32px */
  --margin-2xl: 3rem;            /* 48px */
  --margin-3xl: 4rem;            /* 64px */
  --margin-4xl: 5rem;            /* 80px */
  
  /* Gap */
  --gap-xs: 0.25rem;             /* 4px */
  --gap-sm: 0.5rem;              /* 8px */
  --gap-md: 1rem;                /* 16px */
  --gap-lg: 1.5rem;              /* 24px */
  --gap-xl: 2rem;                /* 32px */
  --gap-2xl: 3rem;               /* 48px */
  
  /* Section Padding */
  --section-padding-y: 72px;
  --section-padding-x: 20px;
  
  /* ============ BORDER RADIUS ============ */
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-4xl: 32px;
  --radius-45xl: 46px;
  --radius-full: 999px;
  --radius-circle: 50%;
  
  /* ============ SHADOWS ============ */
  
  --shadow-sm: 0 2px 8px rgba(12, 66, 65, 0.08);
  --shadow-md: 0 10px 30px rgba(12, 66, 65, 0.12);
  --shadow-lg: 0 20px 44px rgba(12, 66, 65, 0.14);
  --shadow-xl: 0 24px 48px rgba(12, 66, 65, 0.18);
  --shadow-2xl: 0 32px 64px rgba(12, 66, 65, 0.22);
  
  /* Button Shadows */
  --shadow-btn: 0 10px 18px rgba(13, 61, 60, 0.18);
  --shadow-btn-hover: 0 14px 22px rgba(13, 61, 60, 0.2);
  
  /* Glass Effect Shadows */
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-glass-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  
  /* ============ TRANSITIONS ============ */
  
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease;
  
  /* ============ Z-INDEX ============ */
  
  --z-dropdown: 1000;
  --z-sticky: 2000;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ============ BREAKPOINTS ============ */
  /* Note: These are for reference, use in @media queries */
  
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  
  /* ============ CONTAINER WIDTHS ============ */
  
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
  
  /* ============ COMPONENT SPECIFIC ============ */
  
  /* Header */
  --header-height: 90px;
  --header-height-scrolled: 50px;
  --header-max-width: 1320px;
  
  /* Hero */
  --hero-padding-top: 100px;
  
  /* Buttons */
  --btn-padding-y: 0.55rem;
  --btn-padding-x: 1rem;
  --btn-padding-y-lg: 0.7rem;
  --btn-padding-x-lg: 1.6rem;
  
  /* Cards */
  --card-padding: 1.5rem;
  --card-padding-lg: 2rem;
  
  /* Badges */
  --badge-padding-y: 0.4rem;
  --badge-padding-x: 0.8rem;
}

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

@media (max-width: 991.98px) {
  :root {
    --font-size-h1: 2rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.5rem;
    --section-padding-y: 48px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --font-size-h1: 1.75rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --section-padding-y: 36px;
  }
}