/* ============================================
   Stars Orbit Saudi Arabia — Design Tokens
   مرجع الهوية البصرية الموحد
   ============================================ */

:root {
  /* ── Primary Colors ── */
  --brand-primary:        #1a2744;    /* Navy Blue - الأزرق الداكن */
  --brand-primary-light:  #2a3d66;    /* Navy lighter */
  --brand-primary-dark:   #0f1a2e;    /* Navy darker */

  /* ── Secondary / Accent ── */
  --brand-secondary:      #c9a84c;    /* Gold - الذهبي */
  --brand-secondary-light:#dfc06e;    /* Gold lighter */
  --brand-secondary-dark: #a88a32;    /* Gold darker */

  /* ── Neutrals ── */
  --brand-white:          #ffffff;
  --brand-light:          #f7f8fa;    /* Light background */
  --brand-gray-100:       #eef0f4;
  --brand-gray-200:       #dde1e8;
  --brand-gray-300:       #b0b8c9;
  --brand-gray-400:       #8892a4;
  --brand-gray-500:       #5f6b80;
  --brand-dark:           #1a1a2e;    /* Dark text */
  --brand-black:          #0d0d1a;

  /* ── Semantic ── */
  --brand-success:        #27ae60;
  --brand-warning:        #f39c12;
  --brand-danger:         #e74c3c;
  --brand-info:           #3498db;

  /* ── Typography ── */
  --brand-font-ar:        'Cairo', 'Tajawal', sans-serif;
  --brand-font-en:        'Poppins', 'Inter', sans-serif;
  --brand-font-heading:   'Cairo', 'Poppins', sans-serif;

  /* ── Font Sizes ── */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  /* ── Font Weights ── */
  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* ── Spacing ── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  4rem;
  --space-3xl:  6rem;

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full:50%;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(26, 39, 68, 0.08);
  --shadow-md:  0 4px 12px rgba(26, 39, 68, 0.12);
  --shadow-lg:  0 8px 30px rgba(26, 39, 68, 0.16);
  --shadow-xl:  0 16px 50px rgba(26, 39, 68, 0.2);
  --shadow-gold:0 4px 20px rgba(201, 168, 76, 0.25);

  /* ── Transitions ── */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* ── Layout ── */
  --container-max:     1200px;
  --container-wide:    1400px;
  --header-height:     80px;
}

/* ── Dark Mode Support ── */
[data-theme="dark"] {
  --brand-light:     #1a1a2e;
  --brand-white:     #0f1a2e;
  --brand-dark:      #f7f8fa;
  --brand-gray-100:  #2a3d66;
  --brand-gray-200:  #1a2744;
}