/* =========================================================
   Sport IQ — Design Tokens
   الملف الأساسي لكل قيم التصميم (ألوان، خطوط، مسافات)
   غيّر القيم هنا فقط لتغيير الهوية البصرية كاملًا
   ========================================================= */

:root {
  /* -------------------------------------------------------
     الألوان الأساسية
     ------------------------------------------------------- */
  /* خلفية */
  --color-bg-primary:    #0A0612;
  --color-bg-secondary:  #120A1F;
  --color-bg-tertiary:   #1A0F2E;
  --color-bg-card:       rgba(18, 10, 31, 0.85);
  --color-bg-card-hover: rgba(28, 16, 48, 0.95);

  /* البنفسجي الأساسي */
  --color-primary-from:  #7B2FF7;
  --color-primary-to:    #B14EFF;
  --color-primary:       #9B3FFF;
  --color-primary-light: rgba(155, 63, 255, 0.15);
  --color-primary-glow:  rgba(155, 63, 255, 0.4);

  /* الذهبي — VIP والجوائز */
  --color-gold-from:     #FFD700;
  --color-gold-to:       #FFAA00;
  --color-gold:          #FFBF00;
  --color-gold-light:    rgba(255, 191, 0, 0.15);
  --color-gold-glow:     rgba(255, 191, 0, 0.35);

  /* الألوان الدلالية */
  --color-success:       #22C55E;
  --color-success-light: rgba(34, 197, 94, 0.15);
  --color-danger:        #EF4444;
  --color-danger-light:  rgba(239, 68, 68, 0.15);
  --color-info:          #3B82F6;
  --color-info-light:    rgba(59, 130, 246, 0.15);
  --color-warning:       #F59E0B;
  --color-warning-light: rgba(245, 158, 11, 0.15);

  /* الحدود والخطوط */
  --color-border:        rgba(155, 63, 255, 0.2);
  --color-border-strong: rgba(155, 63, 255, 0.45);
  --color-divider:       rgba(255, 255, 255, 0.06);

  /* النصوص */
  --color-text-primary:   #F0E9FF;
  --color-text-secondary: #A89BC2;
  --color-text-muted:     #6B5F80;
  --color-text-disabled:  #3D3450;
  --color-text-inverse:   #0A0612;

  /* -------------------------------------------------------
     التدرجات الجاهزة
     ------------------------------------------------------- */
  --gradient-primary:  linear-gradient(135deg, var(--color-primary-from) 0%, var(--color-primary-to) 100%);
  --gradient-gold:     linear-gradient(135deg, var(--color-gold-from) 0%, var(--color-gold-to) 100%);
  --gradient-bg:       linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  --gradient-card:     linear-gradient(145deg, rgba(28,16,48,0.9) 0%, rgba(10,6,18,0.95) 100%);
  --gradient-success:  linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
  --gradient-danger:   linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
  --gradient-shimmer:  linear-gradient(90deg, transparent 0%, rgba(155,63,255,0.08) 50%, transparent 100%);

  /* -------------------------------------------------------
     الزجاجية (Glassmorphism)
     ------------------------------------------------------- */
  --glass-bg:          rgba(18, 10, 31, 0.7);
  --glass-border:      rgba(155, 63, 255, 0.2);
  --glass-blur:        blur(16px);
  --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(155,63,255,0.15);

  /* -------------------------------------------------------
     الظلال والتوهج (Glow Effects)
     ------------------------------------------------------- */
  --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:         0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:         0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:         0 16px 48px rgba(0, 0, 0, 0.6);
  --glow-primary:      0 0 20px var(--color-primary-glow), 0 0 40px rgba(155,63,255,0.2);
  --glow-gold:         0 0 20px var(--color-gold-glow), 0 0 40px rgba(255,191,0,0.2);
  --glow-success:      0 0 16px rgba(34,197,94,0.4);
  --glow-danger:       0 0 16px rgba(239,68,68,0.4);
  --glow-card-hover:   0 0 0 1px var(--color-border-strong), 0 8px 32px rgba(155,63,255,0.25);

  /* -------------------------------------------------------
     الخطوط (Typography)
     ------------------------------------------------------- */
  --font-arabic:       'Cairo', 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', monospace;

  /* أحجام الخط */
  --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 */

  /* وزن الخط */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  /* ارتفاع السطر */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* -------------------------------------------------------
     المسافات (Spacing)
     ------------------------------------------------------- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* -------------------------------------------------------
     الزوايا المنحنية (Border Radius)
     ------------------------------------------------------- */
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.625rem;  /* 10px */
  --radius-lg:   0.875rem;  /* 14px */
  --radius-xl:   1.25rem;   /* 20px */
  --radius-2xl:  1.75rem;   /* 28px */
  --radius-full: 9999px;

  /* -------------------------------------------------------
     الانتقالات (Transitions)
     ------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -------------------------------------------------------
     الأبعاد الثابتة
     ------------------------------------------------------- */
  --app-max-width:   480px;   /* الحد الأقصى لعرض التطبيق (Mobile-first) */
  --nav-height:      64px;    /* ارتفاع شريط التنقل السفلي */
  --header-height:   56px;    /* ارتفاع الهيدر */
  --story-avatar-sm: 48px;    /* حجم Avatar القصص الصغير */
  --story-avatar-lg: 56px;    /* حجم Avatar القصص الكبير */

  /* -------------------------------------------------------
     Z-Index Layers
     ------------------------------------------------------- */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;
}

/* -------------------------------------------------------
   Dark mode (الوضع الافتراضي هو الداكن دائمًا)
   ------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  /* نحافظ على الوضع الداكن حتى على أجهزة الـ light mode */
  :root {
    color-scheme: dark;
  }
}