/* ==========================================================================
   EnayaCode Design Tokens
   Single source of truth for colors, spacing, radius, shadows, transitions.
   ========================================================================== */

:root {
  /* ── Brand Colors ── */
  --enayacode-primary:        #2D6A4F;
  --enayacode-primary-light:  #40916C;
  --enayacode-primary-dark:   #1B4332;
  --enayacode-primary-50:     #D8F3DC;

  --enayacode-accent:         #E76F51;
  --enayacode-accent-light:   #F4A261;
  --enayacode-accent-dark:    #D64A2B;

  --enayacode-secondary:      #264653;
  --enayacode-secondary-light:#2A9D8F;

  /* ── Modern Vibrant & Glass Tokens ── */
  --glass-bg:             rgba(10, 15, 28, 0.92);
  --glass-border:         rgba(255, 255, 255, 0.05);
  --glass-shadow:         0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --neon-glow:            0 0 20px rgba(16, 185, 129, 0.3);
  --brand-gradient:       linear-gradient(135deg, #10B981 0%, #059669 100%);
  --sidebar-gradient:     linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 28, 0.98) 100%);
  --active-gradient:      linear-gradient(90deg, #10B981 0%, #064E3B 100%);

  /* ── Domain Colors (6 Educational Domains) ── */
  --domain-faith:         #7B68EE;
  --domain-self:          #20B2AA;
  --domain-behavioral:    #FF8C42;
  --domain-quran:         #4CAF50;
  --domain-knowledge:     #42A5F5;
  --domain-mental:        #FF7043;

  /* ── Evaluation Status Colors ── */
  --status-achieved:      #2D6A4F;
  --status-progress:      #F4A261;
  --status-not-achieved:  #E76F51;

  /* ── Neutrals ── */
  --enayacode-bg:             #FAFBFC;
  --enayacode-surface:        #FFFFFF;
  --enayacode-border:         #E8ECF0;
  --enayacode-text:           #1A1A2E;
  --enayacode-text-muted:     #6B7280;
  --enayacode-text-light:     #9CA3AF;

  /* ── Spacing Scale ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ── Border Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 50%;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 8px 25px rgba(45, 106, 79, 0.15);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Font Stacks ── */
  --font-arabic:  'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-english: 'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* ── Bootstrap Variable Overrides ── */
  --bs-primary:        var(--enayacode-primary);
  --bs-secondary:      var(--enayacode-secondary);
  --bs-success:        var(--status-achieved);
  --bs-warning:        var(--enayacode-accent-light);
  --bs-danger:         var(--enayacode-accent);
  --bs-body-bg:        var(--enayacode-bg);
  --bs-body-color:     var(--enayacode-text);
  --bs-border-color:   var(--enayacode-border);
  --bs-border-radius:    var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
}

/* ── Global Body ── */
body {
  font-family: var(--font-arabic);
  background: var(--enayacode-bg);
  color: var(--enayacode-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

html[lang="en"] body {
  font-family: var(--font-english);
}

/* ── RTL Overrides ── */
html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

/* Numeric / LTR inputs keep LTR */
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input.ltr-input {
  direction: ltr;
  text-align: left;
}

/* English text helper */
.en-text {
  font-family: var(--font-english);
  direction: ltr;
}