/* =============================================================
   VARIABLES.CSS — CSS Custom Properties
   Al Buraimi Ministry eServices Web Portal
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=Tajawal:wght@300;400;500;700&display=swap');

:root {
  /* ─── Primary Brand ─── */
  --color-primary:        #101c4e;
  --color-primary-light:  #1a2f7a;
  --color-primary-dark:   #0a1235;

  /* ─── Accent Colors ─── */
  --color-accent-green:   #2ebd9a;
  --color-accent-purple:  #6b3fa0;
  --color-accent-orange:  #f5a623;
  --color-accent-blue:    #2196f3;
  --color-accent-teal:    #00897b;
  --color-accent-navy:    #101c4e;
  --color-accent-light-purple: #7e57c2;

  /* ─── Semantic Colors ─── */
  --color-success:        #27ae60;
  --color-warning:        #f39c12;
  --color-error:          #e74c3c;
  --color-info:           #2196f3;

  /* ─── Neutral Scale ─── */
  --color-white:          #ffffff;
  --color-bg-light:       #f0f2f7;
  --color-bg-card:        #ffffff;
  --color-border:         #dde3ee;
  --color-text-primary:   #1a1f36;
  --color-text-secondary: #6b7394;
  --color-text-muted:     #9aa0ba;

  /* ─── Footer ─── */
  --color-footer-bg:      #0d1840;

  /* ─── Gradients ─── */
  --gradient-hero: linear-gradient(135deg, #101c4e 0%, #1a3a6b 50%, #0d2744 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(16,28,78,0.05) 0%, rgba(107,63,160,0.08) 100%);
  --gradient-teal: linear-gradient(135deg, #2ebd9a 0%, #00897b 100%);

  /* ─── Typography ─── */
  --font-display:   'Plus Jakarta Sans', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-arabic:    'Tajawal', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;
  --text-4xl:   3.5rem;
  --text-hero:  clamp(2.5rem, 5vw, 4.5rem);

  /* ─── Border Radius ─── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ─── Spacing ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ─── Shadows ─── */
  --shadow-sm:  0 1px 3px rgba(16,28,78,0.08);
  --shadow-md:  0 4px 16px rgba(16,28,78,0.12);
  --shadow-lg:  0 8px 32px rgba(16,28,78,0.16);
  --shadow-xl:  0 16px 48px rgba(16,28,78,0.20);

  /* ─── Layout ─── */
  --container-max:  1200px;
  --navbar-height:  136px;
  --topbar-height:  52px;
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;
}

/* Arabic font override when RTL */
[dir="rtl"] {
  --font-body: 'Tajawal', sans-serif;
}