/* ═══════════════════════════════════════════════════
   شركة الخدمات الملكية للتنظيف — Design System Tokens
   ═══════════════════════════════════════════════════ */

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

:root {
  /* ─── Brand Colors ─── */
  --clr-royal: #071A33;
  --clr-royal-light: #0E2D52;
  --clr-royal-dark: #041020;
  --clr-royal-rgb: 7, 26, 51;

  --clr-gold: #D4AF37;
  --clr-gold-light: #E8C84A;
  --clr-gold-dark: #B8942E;
  --clr-gold-rgb: 212, 175, 55;

  --clr-white: #FFFFFF;
  --clr-green: #16A34A;
  --clr-green-light: #22C55E;
  --clr-green-dark: #15803D;
  --clr-green-rgb: 22, 163, 74;

  --clr-gray: #F5F7FA;
  --clr-gray-100: #F0F2F5;
  --clr-gray-200: #E5E7EB;
  --clr-gray-300: #D1D5DB;

  --clr-navy: #0B1220;
  --clr-navy-light: #1A2744;
  --clr-navy-rgb: 11, 18, 32;

  /* ─── Semantic Colors ─── */
  --clr-text: #0B1220;
  --clr-text-muted: #6B7280;
  --clr-text-light: #9CA3AF;
  --clr-text-white: #FFFFFF;
  --clr-text-on-dark: rgba(255, 255, 255, 0.85);

  --clr-border: rgba(7, 26, 51, 0.08);
  --clr-border-gold: rgba(212, 175, 55, 0.3);

  /* ─── Typography ─── */
  --ff-primary: 'Cairo', 'Segoe UI', sans-serif;
  --ff-display: 'Tajawal', 'Cairo', sans-serif;

  --fs-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --fs-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --fs-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --fs-lg: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
  --fs-xl: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --fs-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --fs-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --fs-4xl: clamp(1.8rem, 1.4rem + 2vw, 2.5rem);
  --fs-5xl: clamp(2.2rem, 1.6rem + 3vw, 3.25rem);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* ─── Spacing ─── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ─── Shadows ─── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.14);
  --shadow-2xl: 0 25px 65px rgba(0, 0, 0, 0.18);
  --shadow-gold: 0 4px 25px rgba(212, 175, 55, 0.2);
  --shadow-gold-lg: 0 8px 40px rgba(212, 175, 55, 0.3);
  --shadow-gold-glow: 0 0 30px rgba(212, 175, 55, 0.4);
  --shadow-royal: 0 4px 30px rgba(7, 26, 51, 0.25);
  --shadow-green: 0 4px 20px rgba(22, 163, 74, 0.2);
  --shadow-card: 0 2px 20px rgba(7, 26, 51, 0.05);
  --shadow-card-hover: 0 12px 40px rgba(7, 26, 51, 0.1);

  /* ─── Borders ─── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* ─── Transitions ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --tr-fast: 150ms var(--ease-smooth);
  --tr-base: 300ms var(--ease-smooth);
  --tr-slow: 500ms var(--ease-out);
  --tr-spring: 600ms var(--ease-spring);

  /* ─── Z-Index Scale ─── */
  --z-behind: -1;
  --z-base: 1;
  --z-card: 10;
  --z-sticky: 50;
  --z-header: 100;
  --z-menu: 150;
  --z-floating: 200;
  --z-modal: 300;
  --z-max: 9999;

  /* ─── Layout ─── */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --header-height: 80px;
  --section-padding: clamp(3rem, 8vw, 6rem);

  /* ─── Glassmorphism ─── */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-medium: rgba(255, 255, 255, 0.1);
  --glass-bg-strong: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-strong: rgba(255, 255, 255, 0.2);
  --glass-bg-light: rgba(255, 255, 255, 0.75);
  --glass-border-light: rgba(255, 255, 255, 0.5);

  /* ─── Gradients ─── */
  --grad-royal: linear-gradient(135deg, #071A33 0%, #0E2D52 50%, #071A33 100%);
  --grad-royal-radial: radial-gradient(ellipse at 30% 50%, #0E2D52 0%, #071A33 70%);
  --grad-gold: linear-gradient(135deg, #B8942E 0%, #D4AF37 40%, #E8C84A 100%);
  --grad-gold-text: linear-gradient(135deg, #D4AF37 0%, #E8C84A 50%, #D4AF37 100%);
  --grad-green: linear-gradient(135deg, #15803D 0%, #16A34A 50%, #22C55E 100%);
  --grad-hero: linear-gradient(160deg, #041020 0%, #071A33 30%, #0E2D52 60%, #071A33 100%);
  --grad-cta: linear-gradient(135deg, #071A33 0%, #0E2D52 100%);
  --grad-card: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
  --grad-shine: linear-gradient(105deg, transparent 40%, rgba(212,175,55,0.15) 45%, rgba(212,175,55,0.3) 50%, rgba(212,175,55,0.15) 55%, transparent 60%);
}