:root {
  /* ===== COLORS — semantic, not raw ===== */
  --color-brand-navy: #0A2B5E;
  --color-brand-navy-dark: #051b3b;
  --color-brand-navy-light: #E5EEFB;
  --color-brand-cyan: #2B9ED9;
  --color-brand-cyan-dark: #1a8bc4;
  --color-brand-cyan-light: #E5F5FF;
  --color-brand-mint: #00D4AA;
  --color-brand-purple: #8B5CF6;

  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-danger: #F43F5E;
  --color-danger-light: #fee2e2;

  --color-bg: #F9FBFE;
  --color-surface: #ffffff;
  --color-text: #13294b;
  --color-text-muted: #4a627a;
  --color-border: #E2EAF3;

  /* ===== TYPOGRAPHY ===== */
  --font-body: 'Tajawal', system-ui, sans-serif;
  --font-body-en: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'DM Serif Display', serif;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 44px;

  /* ===== SPACING ===== */
  --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;

  /* ===== RADIUS & SHADOWS ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ===== DARK MODE (centralized - overrides light defaults) ===== */
html[data-theme="dark"],
html[data-theme="soft-dark"] {
  --color-bg: #0b1120;
  --color-surface: #111b2e;
  --color-text: #e8edf5;
  --color-text-muted: #8a9bb5;
  --color-border: rgba(43, 158, 217, 0.18);

  /* Brand adjustments for dark surfaces */
  --color-brand-navy-light: #1f3a6b;
  --color-brand-cyan-light: #1f4f6e;
  --color-brand-cyan-dark: #63bceb;

  /* Feedback colors on dark */
  --color-success-light: #064e3b;
  --color-warning-light: #3f2e1a;
  --color-danger-light: #3f1a1f;

  /* Darker, softer shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

/* ===== BILINGUAL / LOGICAL HELPERS (i18n) ===== */
html[dir="ltr"] {
  --font-body: var(--font-body-en);
}

/* Override hardcoded font-family on body for LTR */
html[dir="ltr"] body {
  font-family: var(--font-body-en);
}

/* Flip directional arrows in LTR */
html[dir="ltr"] .fa-arrow-right:not(.no-flip) {
  transform: scaleX(-1);
}
html[dir="ltr"] .fa-arrow-left:not(.no-flip) {
  transform: scaleX(-1);
}
html[dir="ltr"] .fa-chevron-right:not(.no-flip) {
  transform: scaleX(-1);
}

/* Flip search icon position for LTR (pages that hardcode right:13px) */
html[dir="ltr"] .search-wrap i {
  right: auto !important;
  left: 13px;
}
html[dir="ltr"] .search-inp {
  padding: 10px 14px 10px 40px !important;
}

/* Logical properties for safer RTL/LTR */
.margin-inline-start { margin-inline-start: var(--space-4); }
.margin-inline-end   { margin-inline-end: var(--space-4); }
.padding-inline-start { padding-inline-start: var(--space-3); }
.text-align-start { text-align: start; }
.text-align-end   { text-align: end; }