/* ===================================
   DESIGN TOKENS - GoNorth Media
   =================================== */

:root {
  /* ── Colors - GoNorth Media Brand ── */
  --color-bg-primary: #060E14;
  --color-bg-secondary: #091520;
  --color-bg-tertiary: #0D1E2E;
  --color-bg-card: rgba(13, 157, 184, 0.04);
  --color-bg-card-hover: rgba(13, 157, 184, 0.09);
  
  /* GoNorth Teal (السهم) */
  --color-accent-purple: #0D9DB8;
  --color-accent-purple-light: #14BDD9;
  /* GoNorth Navy (الشعار الداكن) */
  --color-accent-gold: #1B4B5E;
  --color-accent-gold-light: #256073;
  
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A8C4CE;
  --color-text-muted: #5E8694;
  
  --color-border: rgba(13, 157, 184, 0.12);
  --color-border-hover: rgba(13, 157, 184, 0.4);
  
  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #0D9DB8 0%, #1B4B5E 100%);
  --gradient-primary-52: linear-gradient(52deg, #0D9DB8 25%, #256073 100%);
  --gradient-bg-section: linear-gradient(180deg, #060E14 0%, #0D1E2E 50%, #060E14 100%);
  --gradient-bg-cta: linear-gradient(135deg, #071620 0%, #0D2840 50%, #071620 100%);
  --gradient-card: linear-gradient(145deg, rgba(13, 157, 184, 0.08) 0%, rgba(27, 75, 94, 0.06) 100%);
  --gradient-text: linear-gradient(90deg, #0D9DB8, #14BDD9);
  
  /* ── Typography ── */
  --font-heading: 'Cairo', sans-serif;
  --font-body: 'Changa', 'Almarai', sans-serif;
  --font-accent: 'Outfit', sans-serif;
  
  --fs-hero: clamp(3rem, 6vw, 4.5rem);
  --fs-h1: clamp(2.5rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.8rem, 4vw, 2.8rem);
  --fs-h3: clamp(1.4rem, 3vw, 1.8rem);
  --fs-h4: clamp(1.1rem, 2vw, 1.4rem);
  --fs-body: 15px;
  --fs-small: 14px;
  --fs-xs: 12px;
  
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-regular: 400;
  --fw-light: 300;
  
  --lh-tight: 1.2;
  --lh-normal: 1.8;
  --lh-relaxed: 2.0;
  
  /* ── Spacing ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  
  --container-width: 1200px;
  --container-padding: 1.5rem;
  
  /* ── Border Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 35px;
  --radius-xl: 40px;
  --radius-pill: 50px;
  --radius-circle: 50%;
  
  /* ── Shadows ── */
  --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.4);
  --shadow-glow-purple: 0 0 40px rgba(13, 157, 184, 0.18);
  --shadow-glow-gold: 0 0 40px rgba(27, 75, 94, 0.15);
  --shadow-btn: 0 4px 20px rgba(13, 157, 184, 0.35);
  
  /* ── Transitions ── */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ── Z-Index ── */
  --z-header: 1000;
  --z-overlay: 900;
  --z-modal: 1100;
  --z-tooltip: 1200;
}