/* =====================================================================
   NESAM — theme.css
   Design tokens, light/dark themes, typography, RTL & global transitions
   ===================================================================== */

:root{
  /* Brand */
  --teal:        #008081;
  --teal-bright: #16a6a4;
  --teal-deep:   #0a6e6f;
  --blue:        #2a9fd6;
  --cream:       #f3f2ec;
  --red:         #e5484d;

  /* Geometry */
  --maxw: 1180px;
  --radius:   20px;
  --radius-md:14px;
  --radius-sm:10px;
  --gutter: clamp(18px, 4vw, 40px);

  /* Motion */
  --ease:  cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .2s;
  --t-med:  .45s;
  --t-slow: .8s;

  /* Fonts */
  --font-en: 'Poppins','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-ar: 'Tajawal','Cairo','Segoe UI',system-ui,sans-serif;
  --font-body-en: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font: var(--font-en);
  --font-body: var(--font-body-en);

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0,0,0,.08);
  --shadow:    0 24px 60px rgba(0,0,0,.18);
  --shadow-lg: 0 40px 110px rgba(0,0,0,.30);
}

/* ---------- DARK THEME (default) ---------- */
[data-theme="dark"]{
  color-scheme: dark;
  --bg:        #060d0c;
  --bg-2:      #0b1816;
  --surface:   #0f1d1b;
  --surface-2: #14242146;
  --surface-3: #142522;
  --card:      #0f1e1c;
  --card-2:    #122220;
  --border:    rgba(255,255,255,.085);
  --border-2:  rgba(255,255,255,.14);
  --text:      #e9f2f0;
  --heading:   #f4faf8;
  --muted:     #93a8a4;
  --faint:     rgba(233,242,240,.45);
  --logo:      var(--cream);
  --nav-bg:    rgba(7,14,13,.72);
  --nav-border:rgba(255,255,255,.07);
  --hero-grad: radial-gradient(130% 120% at 50% -10%, #0c1c1a 0%, #060d0c 60%);
  --glow:      rgba(22,166,164,.22);
  --chip-bg:   rgba(255,255,255,.04);
  --tick:      var(--teal-bright);
  --grid-line: rgba(255,255,255,.04);
}

/* ---------- LIGHT THEME ---------- */
[data-theme="light"]{
  color-scheme: light;
  --bg:        #eef1ee;
  --bg-2:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #f4f7f5;
  --surface-3: #eef2f0;
  --card:      #ffffff;
  --card-2:    #f6f9f7;
  --border:    rgba(12,40,38,.10);
  --border-2:  rgba(12,40,38,.16);
  --text:      #1b2b28;
  --heading:   #0c1a18;
  --muted:     #5e716d;
  --faint:     rgba(20,32,30,.5);
  --logo:      var(--teal);
  --nav-bg:    rgba(255,255,255,.78);
  --nav-border:rgba(12,40,38,.08);
  --hero-grad: radial-gradient(130% 120% at 50% -10%, #ffffff 0%, #e7ece9 70%);
  --glow:      rgba(0,128,129,.16);
  --chip-bg:   rgba(0,128,129,.05);
  --tick:      var(--teal);
  --grid-line: rgba(0,60,58,.05);
}

/* ---------- Language / direction ---------- */
html[lang="ar"]{ --font: var(--font-ar); --font-body: var(--font-ar); }

/* ---------- Global theme transition (PC + mobile) ---------- */
*,
*::before,
*::after{
  transition: background-color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              color var(--t-med) var(--ease),
              fill var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
/* Don't transition transform-heavy animated layers via the global rule */
.no-theme-trans, .no-theme-trans *{ transition: none !important; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}