/* ============================================================
   منصة الصقر الجريء — Design System Variables
   ============================================================ */

:root {

  /* ── Brand Colors ── */
  --gold-100: #FFF8E1;
  --gold-200: #FFE082;
  --gold-300: #F0D080;
  --gold-400: #C9A84C;
  --gold-500: #B8922A;
  --gold-600: #9A7820;
  --gold-glow: rgba(201, 168, 76, 0.35);
  --gold-glow-sm: rgba(201, 168, 76, 0.15);

  /* ── Dark Blues ── */
  --navy-950: #020810;
  --navy-900: #050D1A;
  --navy-800: #0A1628;
  --navy-700: #0F2044;
  --navy-600: #152A58;
  --navy-500: #1E3A70;
  --navy-400: #2A4D8A;

  /* ── Accent ── */
  --accent-blue: #4A90E2;
  --accent-teal: #2DD4BF;
  --accent-purple: #8B5CF6;

  /* ── Neutrals ── */
  --white: #FFFFFF;
  --white-90: rgba(255,255,255,0.90);
  --white-70: rgba(255,255,255,0.70);
  --white-50: rgba(255,255,255,0.50);
  --white-20: rgba(255,255,255,0.20);
  --white-10: rgba(255,255,255,0.10);
  --white-05: rgba(255,255,255,0.05);

  /* ── Semantic ── */
  --color-bg:        var(--navy-900);
  --color-bg-alt:    var(--navy-800);
  --color-surface:   rgba(15, 32, 68, 0.6);
  --color-border:    rgba(201, 168, 76, 0.2);
  --color-text:      var(--white-90);
  --color-text-muted: var(--white-70);
  --color-text-dim:  var(--white-50);
  --color-primary:   var(--gold-400);
  --color-primary-hover: var(--gold-300);

  /* ── Gradients ── */
  --grad-gold:        linear-gradient(135deg, var(--gold-400), var(--gold-300), var(--gold-500));
  --grad-gold-text:   linear-gradient(135deg, #F0D080, #C9A84C, #FFE082, #B8922A);
  --grad-hero:        linear-gradient(160deg, #020810 0%, #050D1A 40%, #0A1628 70%, #0F2044 100%);
  --grad-card:        linear-gradient(145deg, rgba(15,32,68,0.8), rgba(10,22,40,0.9));
  --grad-section-alt: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  --grad-cta:         linear-gradient(135deg, #0F2044 0%, #152A58 50%, #0A1628 100%);

  /* ── Typography ── */
  --font-heading: 'Cairo', 'Amiri', sans-serif;
  --font-body:    'Tajawal', 'Cairo', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight:  1.2;
  --lh-snug:   1.375;
  --lh-normal: 1.6;
  --lh-loose:  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;

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

  /* ── Shadows ── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.5);
  --shadow-xl:   0 16px 60px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 20px rgba(201,168,76,0.3), 0 0 60px rgba(201,168,76,0.1);
  --shadow-gold-sm: 0 0 10px rgba(201,168,76,0.25);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.1);

  /* ── Glass ── */
  --glass-bg:     rgba(10, 22, 40, 0.65);
  --glass-border: rgba(201, 168, 76, 0.2);
  --glass-blur:   blur(16px);
  --glass-blur-sm: blur(8px);

  /* ── Transitions ── */
  --transition-fast:   all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --container-max: 1280px;
  --nav-height:    80px;

  /* ── Z-Index ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ============================================================
   الوضع النهاري — Light Mode
   الوضع الافتراضي (بدون data-theme أو data-theme="dark") يبقى
   هو التصميم الليلي الحالي بدون أي تغيير.
   ============================================================ */
[data-theme="light"] {
  --navy-950: #FFFFFF;
  --navy-900: #F7F4EC;
  --navy-800: #FDFBF5;
  --navy-700: #F1EAD8;
  --navy-600: #E9E0C8;
  --navy-500: #DED2AF;
  --navy-400: #C9BB90;

  --white: #0A1628;
  --white-90: rgba(10, 22, 40, 0.90);
  --white-70: rgba(10, 22, 40, 0.70);
  --white-50: rgba(10, 22, 40, 0.50);
  --white-20: rgba(10, 22, 40, 0.16);
  --white-10: rgba(10, 22, 40, 0.08);
  --white-05: rgba(10, 22, 40, 0.04);

  --color-bg:        var(--navy-900);
  --color-bg-alt:    var(--navy-800);
  --color-surface:   rgba(255, 255, 255, 0.75);
  --color-border:    rgba(154, 120, 32, 0.25);
  --color-text:      var(--white-90);
  --color-text-muted: var(--white-70);
  --color-text-dim:  var(--white-50);

  --grad-hero:        linear-gradient(160deg, #FFFFFF 0%, #FBF8F0 40%, #F5EFDD 70%, #EFE5C8 100%);
  --grad-card:        linear-gradient(145deg, rgba(255,255,255,0.95), rgba(250,246,233,0.9));
  --grad-section-alt: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  --grad-cta:         linear-gradient(135deg, #FDFBF5 0%, #F1EAD8 50%, #FBF8F0 100%);

  --glass-bg:     rgba(255, 255, 255, 0.65);
  --glass-border: rgba(154, 120, 32, 0.2);

  --shadow-sm:   0 2px 8px rgba(20,16,4,0.08);
  --shadow-md:   0 4px 20px rgba(20,16,4,0.1);
  --shadow-lg:   0 8px 40px rgba(20,16,4,0.12);
  --shadow-xl:   0 16px 60px rgba(20,16,4,0.15);
  --shadow-card: 0 8px 32px rgba(20,16,4,0.1), 0 0 0 1px rgba(201,168,76,0.15);
}