/* ─────────────────────────────────────────────────────────────────
   nBatch — Global stylesheet (Tailwind-era, slim)

   THEME TOKENS — defined DIRECTLY as --color-* on body[data-theme]
   so Tailwind utilities like `text-text`, `bg-surface`, `border-line`
   read their values straight from the cascade. (An earlier indirection
   through @theme didn't work because CSS custom properties resolve at
   definition site — once Tailwind alias-bound --color-text to --c-text
   on :root, the value was frozen and body-level overrides had no effect.)

   The matching `@theme` block in index.html only declares the token names
   so Tailwind emits the utility classes; values come from the rules below.
   ───────────────────────────────────────────────────────────────── */

:root { --accent-h: 145; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body[data-theme="dark"] {
  --color-surface:      #0B0F14;
  --color-surface-2:    #11161D;
  --color-surface-soft: #1A2129;
  --color-text:         #E7ECEF;
  --color-text-dim:     #8A95A0;
  --color-text-faint:   #5A6470;
  --color-line:         rgba(255, 255, 255, 0.08);
  background: var(--color-surface);
  color: var(--color-text);
  color-scheme: dark;
}

body[data-theme="light"] {
  --color-surface:      #F5F2EC;
  --color-surface-2:    #ECE7DD;
  --color-surface-soft: #FFFFFF;
  --color-text:         #0B0F14;
  --color-text-dim:     #5A6470;
  --color-text-faint:   #8A95A0;
  --color-line:         rgba(11, 15, 20, 0.10);
  background: var(--color-surface);
  color: var(--color-text);
  color-scheme: light;
}

/* ── Arabic / RTL ─────────────────────────────────────────────────── */
html[lang="ar"] body {
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}
html[lang="ar"] .font-display,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 {
  font-family: 'IBM Plex Sans Arabic', 'Inter Tight', sans-serif;
  letter-spacing: 0;
}
html[lang="ar"] .hero-headline { line-height: 1.15; }

html[dir="rtl"] .rtl-flip-x { transform: scaleX(-1); }

html[dir="rtl"] .force-ltr {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 oklch(72% 0.17 var(--accent-h) / 0.45); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.dot-pulse { animation: pulse 1.4s ease-in-out infinite; }

@keyframes nbDepotPulse {
  0%   { transform: scale(0.6); opacity: 0.45; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ── Leaflet overrides ───────────────────────────────────────────── */
.leaflet-container { background: transparent; font-family: 'Inter', sans-serif; }
.leaflet-control-zoom {
  border: 1px solid var(--color-line) !important;
  background: color-mix(in oklch, var(--color-surface) 65%, transparent) !important;
  backdrop-filter: blur(10px);
  border-radius: 8px !important;
  overflow: hidden;
}
.leaflet-control-zoom a {
  background: transparent !important;
  color: var(--color-text) !important;
  border: none !important;
  border-bottom: 1px solid var(--color-line) !important;
}
.leaflet-control-zoom a:last-child { border-bottom: none !important; }
.leaflet-control-zoom a:hover {
  background: oklch(72% 0.17 var(--accent-h) / 0.16) !important;
  color: oklch(72% 0.17 var(--accent-h)) !important;
}

.nb-tooltip {
  background: color-mix(in oklch, var(--color-surface) 92%, transparent) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-line) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  padding: 5px 9px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}
.nb-tooltip::before { display: none !important; }

/* ── Scrollbar polish ────────────────────────────────────────────── */
.nb-thin-scroll { scrollbar-width: thin; }
.nb-thin-scroll::-webkit-scrollbar { width: 6px; }
.nb-thin-scroll::-webkit-scrollbar-thumb {
  background: var(--color-line);
  border-radius: 3px;
}

::selection {
  background: oklch(72% 0.17 var(--accent-h) / 0.30);
}