/* ═══════════════════════════════════════════════════════════
   نظام النادي الصيفي - متغيرات التصميم
   Summer Club Management System - Design Tokens
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── الألوان الأساسية (Summer Palette) ── */
  --ocean-blue: #0077B6;
  --ocean-blue-light: #00B4D8;
  --ocean-blue-dark: #005F8A;
  --ocean-blue-50: rgba(0, 119, 182, 0.08);
  --ocean-blue-100: rgba(0, 119, 182, 0.15);
  --ocean-blue-200: rgba(0, 119, 182, 0.25);

  --orange: #FF6B35;
  --orange-light: #FF8C5A;
  --orange-dark: #E55A2B;
  --orange-50: rgba(255, 107, 53, 0.08);
  --orange-100: rgba(255, 107, 53, 0.15);

  --yellow: #FFD166;
  --yellow-light: #FFDC85;
  --yellow-dark: #F0C040;
  --yellow-50: rgba(255, 209, 102, 0.12);

  --mint: #06D6A0;
  --mint-light: #38E4B7;
  --mint-dark: #05B586;
  --mint-50: rgba(6, 214, 160, 0.08);
  --mint-100: rgba(6, 214, 160, 0.15);

  /* ── ألوان الحالة ── */
  --success: #06D6A0;
  --success-bg: rgba(6, 214, 160, 0.1);
  --warning: #FFD166;
  --warning-bg: rgba(255, 209, 102, 0.12);
  --danger: #EF476F;
  --danger-bg: rgba(239, 71, 111, 0.1);
  --info: #00B4D8;
  --info-bg: rgba(0, 180, 216, 0.1);

  /* ── ألوان الخلفية والسطح ── */
  --bg-primary: #F5F7FA;
  --bg-secondary: #EEF1F5;
  --bg-white: #FFFFFF;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.55);
  --bg-dark: #1A1A2E;
  --bg-dark-card: rgba(30, 30, 50, 0.8);

  /* ── ألوان النصوص ── */
  --text-primary: #1A1A2E;
  --text-secondary: #4A5568;
  --text-muted: #8896A6;
  --text-white: #FFFFFF;
  --text-on-primary: #FFFFFF;

  /* ── الحدود ── */
  --border-color: #E2E8F0;
  --border-light: rgba(0, 0, 0, 0.06);
  --border-focus: var(--ocean-blue);

  /* ── التدرجات اللونية (Gradients) ── */
  --gradient-primary: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
  --gradient-secondary: linear-gradient(135deg, #FF6B35 0%, #FFD166 100%);
  --gradient-success: linear-gradient(135deg, #06D6A0 0%, #00B4D8 100%);
  --gradient-warm: linear-gradient(135deg, #FF6B35 0%, #EF476F 100%);
  --gradient-summer: linear-gradient(135deg, #0077B6 0%, #06D6A0 50%, #FFD166 100%);
  --gradient-hero: linear-gradient(160deg, #0077B6 0%, #00B4D8 40%, #06D6A0 100%);
  --gradient-sidebar: linear-gradient(180deg, #0077B6 0%, #005F8A 100%);
  --gradient-gold: linear-gradient(135deg, #FFD166 0%, #FF6B35 100%);

  /* ── الخطوط ── */
  --font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 3rem;      /* 48px */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ── المسافات (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 */

  /* ── الزوايا الدائرية ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── الظلال ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.16);
  --shadow-primary: 0 4px 20px rgba(0, 119, 182, 0.25);
  --shadow-orange: 0 4px 20px rgba(255, 107, 53, 0.25);
  --shadow-success: 0 4px 20px rgba(6, 214, 160, 0.25);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.06);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.04);

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

  /* ── الزجاجية (Glassmorphism) ── */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(20px);
  --glass-bg-dark: rgba(30, 30, 50, 0.65);
  --glass-border-dark: rgba(255, 255, 255, 0.08);

  /* ── أبعاد الشريط الجانبي ── */
  --sidebar-width: 280px;
  --sidebar-collapsed: 72px;
  --topbar-height: 64px;

  /* ── Z-Index ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}