@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Alexandria:wght@400;500;600;700&display=swap');

/* ============================================
   🎨 الحكيم - Color System (Deep Teal + Gold)
   ============================================ */

/* ====== Arabic RTL Support ====== */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

:root {
  /* ── Primary: Deep Teal / Emerald ── */
  --primary-50: #f0fdfa;
  --primary-100: #ccfbf1;
  --primary-200: #99f6e4;
  --primary-300: #5eead4;
  --primary-500: #0f9488;
  /* main brand */
  --primary-600: #0d7f74;
  /* buttons */
  --primary-700: #0a6660;
  /* hover */
  --primary-900: #042f2e;

  /* ── Accent: Warm Gold ── */
  --accent-50: #fffbeb;
  --accent-300: #fcd34d;
  --accent-400: #fbbf24;
  --accent-500: #f59e0b;
  /* gold main */
  --accent-600: #d97706;
  /* gold darker */

  /* ── Secondary: Deep Navy ── */
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;
  --navy-500: #64748b;

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #0f9488 0%, #065f46 100%);
  --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-hero: linear-gradient(145deg, #042f2e 0%, #065f46 40%, #0f766e 100%);
  --gradient-card: linear-gradient(135deg, rgba(15, 148, 136, 0.08) 0%, rgba(245, 158, 11, 0.06) 100%);

  /* ── Semantic / Functional ── */
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-success: #10b981;
  --color-info: #06b6d4;

  /* ── Background ── */
  --bg-page: #f8fffe;
  /* very slight teal tint */
  --bg-card: #ffffff;
  --bg-dark: var(--navy-900);
  --bg-overlay: rgba(4, 47, 46, 0.5);

  /* ── Text ── */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-inverse: #ffffff;
  --text-muted: #94a3b8;

  /* ── Borders ── */
  --border-light: rgba(15, 148, 136, 0.12);
  --border-medium: rgba(15, 148, 136, 0.25);
  --border-focus: var(--primary-500);

  /* ── Legacy variable aliases (للـ compatibility مع الكود القديم) ── */
  --primary-color: var(--primary-500);
  --secondary-color: var(--color-error);
  --background-color: var(--bg-page);
  --card-background-color: var(--bg-card);
  --text-color: var(--text-primary);
  --text-color-light: var(--text-secondary);
  --border-color: var(--border-light);
  --success-color: var(--color-success);
  --success-bg: #ecfdf5;
  --google-red: var(--color-error);
  --accent-color: var(--primary-500);
  --accent-gradient: var(--gradient-primary);

  /* ── Typography ── */
  --font-primary: 'Cairo', 'Alexandria', 'Inter', system-ui, sans-serif;
  --font-size-base: 15px;

  /* ── Spacing (8pt Grid) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Border Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ── Shadows (Teal-tinted) ── */
  --shadow-sm: 0 1px 3px rgba(15, 148, 136, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 148, 136, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px rgba(15, 148, 136, 0.15), 0 4px 8px rgba(0, 0, 0, 0.05);
  --shadow-gold: 0 4px 20px rgba(245, 158, 11, 0.3);
  --shadow-premium: 0 20px 40px rgba(15, 148, 136, 0.2), 0 8px 16px rgba(0, 0, 0, 0.08);

  /* ── Animation ── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Card Identity Colors ── */
  --card-flashcards: #8b5cf6;
  --card-google-form: #10b981;
  --card-video: #f43f5e;
  --card-lesson: #0f9488;
  --card-quiz: #f59e0b;
  --card-document: #e55039;

  /* ── Mobile App ── */
  --header-height-mobile: 56px;
  --footer-height-mobile: 48px;
  --radius-app: 24px;
}

/* ── Global Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Scrollbar (Teal branded) ── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--primary-50);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-300);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-500);
}

/* ── Selection Color ── */
::selection {
  background: rgba(15, 148, 136, 0.2);
  color: var(--primary-700);
}