/* ==========================================================================
   GENEACADEMY CANONICAL DESIGN SYSTEM (CSS/DESIGN_SYSTEM.CSS)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700;800;900&family=Tajawal:wght@500;700;800;900&display=swap');

:root {
  --navy-primary: #123B5D;       /* Deep professional blue */
  --teal-secondary: #168C8C;     /* Medical & contemporary */
  --gold-accent: #C9A227;        /* Academic excellence */
  --bg-clinical: #F7FAFC;        /* Soft clinical white */
  --card-bg: #FFFFFF;            /* Pure white */
  --text-main: #1F2937;          /* Dark slate */
  --text-muted: #64748B;         /* Cool gray */
  --emerald-verified: #16805B;   /* Emerald green verification */
  --border-subtle: #E2E8F0;

  --font-en-heading: 'Montserrat', system-ui, sans-serif;
  --font-en-body: 'Inter', system-ui, sans-serif;
  --font-ar-heading: 'Tajawal', system-ui, sans-serif;
  --font-ar-body: 'Cairo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

body {
  background-color: var(--bg-clinical);
  color: var(--text-main);
  font-family: var(--font-en-body);
}

[dir="rtl"], [lang="ar"], .font-ar {
  font-family: var(--font-ar-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--navy-primary);
  font-family: var(--font-en-heading);
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] h5, [lang="ar"] h6 {
  font-family: var(--font-ar-heading);
}