/* ==========================================================================
   HSG - Hamdy Salem Group | Design Tokens & Luxury System
   Engineered by LIX (lix-eg.com)
   ========================================================================== */

:root {
  /* Color Palette - Architectural Editorial Luxury */
  --ink: #08090B;
  /* Deepest Imperial Obsidian */
  --charcoal: #111317;
  /* Dark Slate & Grid Backgrounds */
  --graphite: #1A1D24;
  /* Card Surface & Elevated Containers */
  --surface: #242932;
  /* Inset Containers & Subtle Borders */
  --muted: #8F9AA9;
  /* Secondary Editorial Copy */
  --stone: #D6CFBE;
  /* Warm Limestone & Muted Highlights */
  --paper: #F8F6F0;
  /* Primary Off-White Text & Headlines */
  --paper-pure: #FFFFFF;
  /* Pure White Accents */
  --bronze: #C89C57;
  /* Regal Metallic Brass / Gold Accent */
  --bronze-glow: rgba(200, 156, 87, 0.22);
  --bronze-bright: #E2B56C;

  /* Semi-Transparent Overlays */
  --overlay-dark: rgba(8, 9, 11, 0.88);
  --line-subtle: rgba(248, 246, 240, 0.09);
  --line-medium: rgba(248, 246, 240, 0.16);
  --line-strong: rgba(200, 156, 87, 0.35);

  /* Glassmorphism & Elevation */
  --glass-bg: rgba(26, 29, 36, 0.75);
  --glass-border: rgba(200, 156, 87, 0.2);
  --glass-blur: blur(20px);

  /* Typography Families */
  --font-ar: 'Alexandria', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arabic Typesetting, sans-serif;
  --font-en: 'Outfit', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Typography Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.3vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.5vw, 1.35rem);
  --text-xl: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.35rem);
  --text-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  --text-4xl: clamp(3rem, 2.2rem + 3.5vw, 5rem);
  --text-hero: clamp(3.5rem, 2.5rem + 5vw, 7.5rem);

  /* Fluid Spacing Scale */
  --space-3xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-xs: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  --space-sm: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --space-md: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --space-lg: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem);
  --space-xl: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  --space-2xl: clamp(5.5rem, 4rem + 5vw, 9rem);

  /* Layout Dimensions */
  --container-max: 1440px;
  --container-narrow: 1040px;
  --header-height: 96px;
  --header-height-mobile: 76px;

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Motion Easing Curves */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 220ms var(--ease-smooth);
  --transition-base: 400ms var(--ease-expo);
  --transition-slow: 750ms var(--ease-expo);

  /* Elevation Z-Index Spectrum */
  --z-base: 1;
  --z-sticky: 10;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-loader: 1000;
}

/* Custom Gold Luxury Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--ink);
}

::-webkit-scrollbar-thumb {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bronze);
}