/* ==========================================================
   Theme layer (Bootstrap-friendly)
   - Light/Dark via data-bs-theme
   - Telecom carrier accents
========================================================== */

:root{
  --carrier-ym:  #e53e3e;
  --carrier-sf:  #3b82f6;
  --carrier-mtn: #eab308;
  --carrier-you: #8b5cf6;
  /* افتراضي = داكن (قبل تشغيل JS أو عند غياب data-bs-theme على الجذر) */
  --clr-bg:       #07071a;
  --clr-surface:  #0e0e28;
  --clr-surface2: #141435;
  --clr-border:   rgba(255,255,255,.07);
  --clr-border-hi:rgba(139,92,246,.4);
  --clr-txt:      #e8e8f8;
  --clr-txt2:     #9898b8;
  --clr-txt3:     #5a5a7a;
  --clr-cyan:     #22d3ee;
  --shadow-theme: 0 20px 60px rgba(0,0,0,.55);
}

/* Global typography */
html, body{
  font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Prefer Bootstrap tokens, just tint */
html[data-bs-theme="dark"], body[data-bs-theme="dark"]{
  --app-accent: var(--carrier-sf);
  --app-accent-2: var(--carrier-you);

  --clr-bg:       #07071a;
  --clr-surface:  #0e0e28;
  --clr-surface2: #141435;
  --clr-border:   rgba(255,255,255,.07);
  --clr-border-hi:rgba(139,92,246,.4);
  --clr-txt:      #e8e8f8;
  --clr-txt2:     #9898b8;
  --clr-txt3:     #5a5a7a;
  --clr-cyan:     #22d3ee;
  --shadow-theme: 0 20px 60px rgba(0,0,0,.55);
}

html[data-bs-theme="light"], body[data-bs-theme="light"]{
  --app-accent: var(--carrier-sf);
  --app-accent-2: var(--carrier-ym);

  --clr-bg:       #f6f7fb;
  --clr-surface:  #ffffff;
  --clr-surface2: #f0f2f8;
  --clr-border:   rgba(15,23,42,.10);
  --clr-border-hi:rgba(59,130,246,.35);
  --clr-txt:      #0f172a;
  --clr-txt2:     #334155;
  --clr-txt3:     #64748b;
  --clr-cyan:     #0e7490;
  --shadow-theme: 0 16px 48px rgba(15,23,42,.08);
}

/* نص وخلفية الجسم — يتجاوز لون Bootstrap حتى يظهر النص في الوضع الفاتح */
html[data-bs-theme="light"] body,
body[data-bs-theme="light"]{
  color:var(--clr-txt);
  background-color:var(--clr-bg);
}
html[data-bs-theme="dark"] body,
body[data-bs-theme="dark"]{
  color:var(--clr-txt);
  background-color:var(--clr-bg);
}

/* Global link/button accent */
a:hover{color:var(--app-accent)}
.btn-accent{
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent-2);
  --bs-btn-hover-border-color: var(--app-accent-2);
}

/* Bootstrap component tinting (light mode readability) */
html[data-bs-theme="light"] .navbar .nav-link{color:rgba(15,23,42,.75)}
html[data-bs-theme="light"] .navbar .nav-link.active{color:rgba(15,23,42,1)}
html[data-bs-theme="light"] .offcanvas{background:#fff}

/* Small helper for carrier badges */
.badge-carrier-ym{background:rgba(229,62,62,.15);color:var(--carrier-ym);border:1px solid rgba(229,62,62,.35)}
.badge-carrier-sf{background:rgba(59,130,246,.15);color:var(--carrier-sf);border:1px solid rgba(59,130,246,.35)}
.badge-carrier-mtn{background:rgba(234,179,8,.15);color:var(--carrier-mtn);border:1px solid rgba(234,179,8,.35)}
.badge-carrier-you{background:rgba(139,92,246,.15);color:var(--carrier-you);border:1px solid rgba(139,92,246,.35)}