/*
 * ╔══════════════════════════════════════════════════════════╗
 * ║       HOWPlatform — Design Tokens v2.1                  ║
 * ║       www.howplatform.net | كيف التعليمية               ║
 * ║       Light + Dark | RTL | WCAG 2.2 AA                  ║
 * ╚══════════════════════════════════════════════════════════╝
 */

/* ══════════════════════════════════════════════
   1. COLOR SCHEME HINT — يمنع FOUC في بعض المتصفحات
   ══════════════════════════════════════════════ */
:root {
  color-scheme: light dark;
}

/* ══════════════════════════════════════════════
   2. LIGHT MODE (الافتراضي)
   ══════════════════════════════════════════════ */
:root,
[data-theme="light"] {

  /* ── Primary Brand Scale (Blue Institutional) ── */
  --primary-50:  #E3F2FD;
  --primary-100: #BBDEFB;
  --primary-200: #90CAF9;
  --primary-300: #64B5F6;
  --primary-400: #42A5F5;
  --primary-500: #1565C0;
  --primary-600: #1555A8;
  --primary-700: #0D47A1;
  --primary-800: #0A3680;
  --primary-900: #072560;

  /* ── Semantic Aliases ── */
  --primary:       var(--primary-500);
  --primary-dark:  var(--primary-700);
  --primary-light: var(--primary-300);

  /* ── Accent Scale (Amber — تمييز / CTA) ── */
  --accent-50:  #FFF8E1;
  --accent-100: #FFECB3;
  --accent-200: #FFE082;
  --accent-300: #FFD54F;
  --accent-400: #FFCA28;
  --accent-500: #F57C00;
  --accent-600: #E65100;
  --accent-700: #BF360C;
  --accent-800: #8D2607;
  --accent-900: #5C1505;

  --accent:      var(--accent-500);
  --accent-dark: var(--accent-600);

  /* ── Semantic Colors ── */
  --success:       #2E7D32;
  --success-light: #E8F5E9;
  --success-dark:  #1B5E20;

  --warning:       #F57C00;
  --warning-light: #FFF3E0;
  --warning-dark:  #E65100;

  --danger:        #C62828;
  --danger-light:  #FFEBEE;
  --danger-dark:   #B71C1C;

  --info:          #0277BD;
  --info-light:    #E1F5FE;
  --info-dark:     #01579B;

  /* ── Backgrounds & Surfaces ── */
  --bg-base:     #F5F7FA;
  --bg-elevated: #FFFFFF;
  --bg-hero:     #EEF4FF;

  --surface-0: #FFFFFF;
  --surface-1: #F5F7FA;
  --surface-2: #EEF2F7;
  --surface-3: #E8EEF5;

  --border-color:  rgba(21, 101, 192, 0.12);
  --border-subtle: rgba(21, 101, 192, 0.06);
  --border-strong: rgba(21, 101, 192, 0.25);

  /* ── Glass Effect ── */
  --glass-bg:  rgba(255, 255, 255, 0.70);
  --glass-brd: rgba(21, 101, 192, 0.15);
  --glass-shadow: 0 8px 32px rgba(21, 101, 192, 0.08);

  /* ── Text Colors ── */
  --text-primary:   #0D1B2A;
  --text-secondary: #3D5A7A;
  --text-muted:     #6B8BA4;
  --text-inverse:   #FFFFFF;
  --text-link:      #1565C0;
  --text-link-hover:#0D47A1;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.10), 0 8px 20px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.08);

  --shadow-primary: 0 4px 12px rgba(21, 101, 192, 0.16);
  --shadow-accent:  0 4px 12px rgba(245, 124, 0, 0.16);

  /* ── Header ── */
  --header-bg:    rgba(255, 255, 255, 0.92);
  --header-brd:   rgba(21, 101, 192, 0.10);
  --header-text:  #0D1B2A;
  --nav-link:     #3D5A7A;
  --nav-link-hover: #1565C0;
  --nav-hover-bg: rgba(21, 101, 192, 0.06);

  /* ── Footer ── */
  --footer-bg:   #0D47A1;
  --footer-text: #E3F2FD;

  /* ── Buttons ── */
  --btn-primary-bg:    var(--primary-500);
  --btn-primary-hover: var(--primary-700);
  --btn-primary-text:  #ffffff;
  --btn-ghost-brd:     var(--primary-500);
  --btn-ghost-text:    var(--primary-700);
  --btn-ghost-hover:   var(--primary-50);
  --btn-login-bg:      transparent;
  --btn-login-text:    var(--primary-700);
  --btn-login-brd:     var(--primary-500);
  --btn-login-hover-bg:var(--primary-50);

  /* ── Cards ── */
  --card-bg:    #FFFFFF;
  --card-brd:   rgba(21, 101, 192, 0.10);
  --card-hover: rgba(21, 101, 192, 0.04);

  /* ── Canvas Background (animated) ── */
  --fxbg-color-1: rgba(21, 101, 192, 0.12);
  --fxbg-color-2: rgba(245, 124, 0, 0.10);

  /* ── Scrollbar ── */
  --scrollbar-thumb: var(--primary-300);
  --scrollbar-track: var(--surface-1);

  /* ── Dropdown ── */
  --dropdown-bg:  rgba(255, 255, 255, 0.98);
  --dropdown-brd: rgba(21, 101, 192, 0.12);
  --dropdown-item-hover: rgba(21, 101, 192, 0.06);
  --dropdown-text: #0D1B2A;

  /* ── Error Modal ── */
  --modal-bg:    #FFFFFF;
  --modal-title: #C62828;
}

/* ══════════════════════════════════════════════
   3. DARK MODE
   ══════════════════════════════════════════════ */
[data-theme="dark"] {

  /* ── Primary Brand Scale (Dark Adjusted) ── */
  --primary-50:  #0D2137;
  --primary-100: #0F2C4A;
  --primary-200: #1A3F60;
  --primary-300: #2456A4;
  --primary-400: #2E6AC5;
  --primary-500: #4A90E2;
  --primary-600: #5A9FEF;
  --primary-700: #7AB8F5;
  --primary-800: #A0CAFA;
  --primary-900: #D0E8FD;

  --primary:       var(--primary-500);
  --primary-dark:  var(--primary-400);
  --primary-light: var(--primary-600);

  /* ── Accent Scale ── */
  --accent-50:  #1A0E00;
  --accent-100: #2C1800;
  --accent-200: #3F2200;
  --accent-300: #5C3300;
  --accent-400: #7A4700;
  --accent-500: #FFA726;
  --accent-600: #FFB74D;
  --accent-700: #FFCC80;
  --accent-800: #FFE0B2;
  --accent-900: #FFF3E0;

  --accent:      var(--accent-500);
  --accent-dark: var(--accent-600);

  /* ── Semantic Colors ── */
  --success:       #4CAF50;
  --success-light: #1B2E1C;
  --success-dark:  #66BB6A;

  --warning:       #FFB74D;
  --warning-light: #2C1E00;
  --warning-dark:  #FFC107;

  --danger:        #EF5350;
  --danger-light:  #2D0F0F;
  --danger-dark:   #F44336;

  --info:          #29B6F6;
  --info-light:    #0A1F2E;
  --info-dark:     #4FC3F7;

  /* ── Backgrounds & Surfaces ── */
  --bg-base:     #0A1520;
  --bg-elevated: #111D2E;
  --bg-hero:     #0D1A2E;

  --surface-0: #0E1A2B;
  --surface-1: #152133;
  --surface-2: #1C2D42;
  --surface-3: #243550;

  --border-color:  rgba(74, 144, 226, 0.15);
  --border-subtle: rgba(74, 144, 226, 0.08);
  --border-strong: rgba(74, 144, 226, 0.30);

  /* ── Glass Effect ── */
  --glass-bg:    rgba(14, 26, 43, 0.65);
  --glass-brd:   rgba(74, 144, 226, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);

  /* ── Text Colors ── */
  --text-primary:   #E8F1FF;
  --text-secondary: #8BAFC8;
  --text-muted:     #5A7A96;
  --text-inverse:   #0D1B2A;
  --text-link:      #4A90E2;
  --text-link-hover:#7AB8F5;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.50), 0 8px 20px rgba(0, 0, 0, 0.30);
  --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.60), 0 16px 40px rgba(0, 0, 0, 0.40);

  --shadow-primary: 0 8px 24px rgba(74, 144, 226, 0.35);
  --shadow-accent:  0 8px 24px rgba(255, 167, 38, 0.30);

  /* ── Header ── */
  --header-bg:    rgba(10, 21, 32, 0.88);
  --header-brd:   rgba(74, 144, 226, 0.12);
  --header-text:  #E8F1FF;
  --nav-link:     #8BAFC8;
  --nav-link-hover: #E8F1FF;
  --nav-hover-bg: rgba(74, 144, 226, 0.08);

  /* ── Footer ── */
  --footer-bg:   #06101C;
  --footer-text: #8BAFC8;

  /* ── Buttons ── */
  --btn-primary-bg:    var(--primary-500);
  --btn-primary-hover: var(--primary-600);
  --btn-primary-text:  #ffffff;
  --btn-ghost-brd:     var(--primary-500);
  --btn-ghost-text:    var(--primary-700);
  --btn-ghost-hover:   rgba(74, 144, 226, 0.12);
  --btn-login-bg:      transparent;
  --btn-login-text:    var(--primary-700);
  --btn-login-brd:     var(--primary-500);
  --btn-login-hover-bg:rgba(74, 144, 226, 0.12);

  /* ── Cards ── */
  --card-bg:    var(--surface-1);
  --card-brd:   var(--border-color);
  --card-hover: rgba(74, 144, 226, 0.06);

  /* ── Canvas Background ── */
  --fxbg-color-1: rgba(21, 101, 192, 0.25);
  --fxbg-color-2: rgba(245, 124, 0, 0.18);

  /* ── Scrollbar ── */
  --scrollbar-thumb: var(--primary-400);
  --scrollbar-track: var(--surface-1);

  /* ── Dropdown ── */
  --dropdown-bg:  rgba(13, 26, 43, 0.98);
  --dropdown-brd: rgba(74, 144, 226, 0.15);
  --dropdown-item-hover: rgba(74, 144, 226, 0.10);
  --dropdown-text: #E8F1FF;

  /* ── Error Modal ── */
  --modal-bg:    var(--surface-1);
  --modal-title: #EF5350;
}

/* ══════════════════════════════════════════════
   4. SYSTEM PREFERENCE FALLBACK
   (يُطبَّق فقط إن لم يُحدد data-theme بالـ JS)
   ══════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --primary-50:  #0D2137;
    --primary-100: #0F2C4A;
    --primary-200: #1A3F60;
    --primary-300: #2456A4;
    --primary-400: #2E6AC5;
    --primary-500: #4A90E2;
    --primary-600: #5A9FEF;
    --primary-700: #7AB8F5;
    --primary-800: #A0CAFA;
    --primary-900: #D0E8FD;
    --primary:       #4A90E2;
    --primary-dark:  #2E6AC5;
    --primary-light: #5A9FEF;
    --accent-500: #FFA726;
    --accent-600: #FFB74D;
    --accent:     #FFA726;
    --accent-dark:#FFB74D;
    --success: #4CAF50; --success-light: #1B2E1C; --success-dark: #66BB6A;
    --warning: #FFB74D; --warning-light: #2C1E00; --warning-dark:  #FFC107;
    --danger:  #EF5350; --danger-light:  #2D0F0F; --danger-dark:   #F44336;
    --info:    #29B6F6; --info-light:    #0A1F2E; --info-dark:     #4FC3F7;
    --bg-base:     #0A1520;
    --bg-elevated: #111D2E;
    --bg-hero:     #0D1A2E;
    --surface-0: #0E1A2B;
    --surface-1: #152133;
    --surface-2: #1C2D42;
    --surface-3: #243550;
    --border-color:  rgba(74, 144, 226, 0.15);
    --border-subtle: rgba(74, 144, 226, 0.08);
    --border-strong: rgba(74, 144, 226, 0.30);
    --glass-bg:    rgba(14, 26, 43, 0.65);
    --glass-brd:   rgba(74, 144, 226, 0.18);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
    --text-primary:   #E8F1FF;
    --text-secondary: #8BAFC8;
    --text-muted:     #5A7A96;
    --text-inverse:   #0D1B2A;
    --text-link:      #4A90E2;
    --text-link-hover:#7AB8F5;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
    --shadow-md: 0 4px 12px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.25);
    --shadow-lg: 0 20px 40px rgba(0,0,0,.50), 0 8px 20px rgba(0,0,0,.30);
    --shadow-xl: 0 40px 80px rgba(0,0,0,.60), 0 16px 40px rgba(0,0,0,.40);
    --shadow-primary: 0 4px 12px rgba(74,144,226,.18);
    --shadow-accent:  0 4px 12px rgba(255,167,38,.15);
    --header-bg:   rgba(10,21,32,.88);
    --header-brd:  rgba(74,144,226,.12);
    --header-text: #E8F1FF;
    --nav-link:    #8BAFC8;
    --nav-link-hover: #E8F1FF;
    --nav-hover-bg: rgba(74,144,226,.08);
    --footer-bg:   #06101C;
    --footer-text: #8BAFC8;
    --btn-primary-bg:    #4A90E2;
    --btn-primary-hover: #5A9FEF;
    --btn-primary-text:  #ffffff;
    --btn-ghost-brd:     #4A90E2;
    --btn-ghost-text:    #7AB8F5;
    --btn-ghost-hover:   rgba(74,144,226,.12);
    --btn-login-bg:      transparent;
    --btn-login-text:    #7AB8F5;
    --btn-login-brd:     #4A90E2;
    --btn-login-hover-bg:rgba(74,144,226,.12);
    --card-bg:    #152133;
    --card-brd:   rgba(74,144,226,.15);
    --card-hover: rgba(74,144,226,.06);
    --fxbg-color-1: rgba(21,101,192,.25);
    --fxbg-color-2: rgba(245,124,0,.18);
    --scrollbar-thumb: #2E6AC5;
    --scrollbar-track: #152133;
    --dropdown-bg:  rgba(13,26,43,.98);
    --dropdown-brd: rgba(74,144,226,.15);
    --dropdown-item-hover: rgba(74,144,226,.10);
    --dropdown-text: #E8F1FF;
    --modal-bg:    #152133;
    --modal-title: #EF5350;
  }
}

/* ══════════════════════════════════════════════
   5. TYPOGRAPHY SCALE
   ══════════════════════════════════════════════ */
:root {
  /* Type Scale */
  --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 */

  /* Fluid Type */
  --text-hero:    clamp(2rem,   4vw, 3.75rem);
  --text-display: clamp(1.5rem, 2.5vw, 2.25rem);
  --text-title:   clamp(1.25rem, 2vw, 1.875rem);

  /* Font Families */
  --font-primary: 'Almarai', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-display: 'Cairo', 'Almarai', system-ui, sans-serif;
  --font-ui:      'IBM Plex Sans Arabic', 'Almarai', system-ui, sans-serif;
  --font-mono:    'Fira Code', 'Courier New', monospace;

  /* Font Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;
  --fw-black:    900;

  /* Line Heights */
  --lh-tight:  1.25;
  --lh-snug:   1.4;
  --lh-normal: 1.6;
  --lh-relaxed:1.8;
  --lh-loose:  2;
}

/* ══════════════════════════════════════════════
   6. SPACING SCALE (4px base)
   ══════════════════════════════════════════════ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* ══════════════════════════════════════════════
   7. BORDER RADIUS
   ══════════════════════════════════════════════ */
:root {
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* Legacy alias */
  --border-radius: var(--radius-lg);
}

/* ══════════════════════════════════════════════
   8. ANIMATION & TRANSITION
   ══════════════════════════════════════════════ */
:root {
  --duration-fast:   120ms;
  --duration-base:   180ms;
  --duration-slow:   320ms;
  --duration-slower: 500ms;

  --ease-default: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Transition shortcuts */
  --transition:      all var(--duration-base) var(--ease-default);
  --transition-fast: all var(--duration-fast) var(--ease-default);
  --transition-slow: all var(--duration-slow) var(--ease-default);
}

/* ══════════════════════════════════════════════
   9. BREAKPOINTS (CSS custom media — reference only)
   ══════════════════════════════════════════════ */
:root {
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
  --maxw:   1200px;
}

/* ══════════════════════════════════════════════
   10. RINGS (Stat Cards)
   ══════════════════════════════════════════════ */
:root {
  --ring-size:      140px;
  --ring-thickness: 12px;
}

/* ══════════════════════════════════════════════
   11. SCROLLBAR STYLING
   ══════════════════════════════════════════════ */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track  { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb  {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  border: 2px solid var(--scrollbar-track);
}
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ══════════════════════════════════════════════
   12. REDUCED MOTION
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}