/* ============================================================
   Urban Observatory — design tokens & base
   Professional light civic theme, bilingual (RTL/LTR)
   ============================================================ */

:root {
  /* surfaces */
  --bg: #f4f6fa;
  --bg-soft: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --surface-solid: #ffffff;
  --line: #e7eaf3;
  --line-strong: #d6dbe9;

  /* text */
  --ink-hi: #1a2440;
  --ink: #3b4666;
  --ink-dim: #687192;
  --ink-faint: #98a0b8;

  /* primary accent — deep civic indigo */
  --accent: #3552c4;
  --accent-strong: #2a42a3;
  --accent-soft: #eef1fb;
  --accent-ink: #ffffff;

  /* navy inverse panels (hero) */
  --navy: #1b2a55;
  --navy-2: #233567;

  /* muted professional signal palette */
  --gold: #b9821d;          /* amber — pending / mid */
  --gold-soft: #faf3e3;
  --teal: #0d9488;          /* ready / positive secondary */
  --teal-soft: #e6f5f3;
  --sage: #2f9e44;          /* validated / computed */
  --sage-soft: #e9f6ec;
  --coral: #d6453d;         /* missing / alert */
  --coral-soft: #fbeceb;
  --peri: #7c86a3;          /* indexed / neutral */
  --peri-soft: #f0f2f7;
  --lilac: #6741d9;         /* estimated / derived */
  --lilac-soft: #f1edfc;
  --sky: #1971c2;           /* SDG / links */
  --sky-soft: #e7f1fa;

  /* status mapping */
  --st-operational: var(--accent);
  --st-ready: var(--teal);
  --st-indexed: var(--peri);
  --st-validated: var(--sage);
  --st-estimated: var(--lilac);
  --st-pending: var(--gold);
  --st-missing: var(--coral);

  /* geometry */
  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 8px;
  --gap: 18px;
  --content-w: 1280px;
  --nav-w: 250px;

  /* type — Cairo first for Arabic: smooth, highly readable */
  --f-display-en: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --f-body-en: 'Geist', system-ui, sans-serif;
  --f-display-ar: 'Cairo', 'Readex Pro', system-ui, sans-serif;
  --f-body-ar: 'Cairo', 'Readex Pro', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* motion */
  --fast: 160ms cubic-bezier(.4, 0, .2, 1);
  --slow: 560ms cubic-bezier(.18, .82, .22, 1);

  --shadow-card: 0 1px 2px rgba(26, 36, 64, 0.05), 0 4px 16px rgba(26, 36, 64, 0.05);
  --shadow-pop: 0 8px 18px rgba(26, 36, 64, 0.10), 0 24px 56px rgba(26, 36, 64, 0.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="ar"] body { font-family: var(--f-body-ar); line-height: 1.8; }
html[lang="en"] body { font-family: var(--f-body-en); }

h1, h2, h3, h4 { margin: 0; color: var(--ink-hi); line-height: 1.3; font-weight: 700; }
html[lang="ar"] :is(h1, h2, h3, h4) { font-family: var(--f-display-ar); line-height: 1.5; }
html[lang="en"] :is(h1, h2, h3, h4) { font-family: var(--f-display-en); }

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
input, select, textarea { font: inherit; }
::selection { background: rgba(53, 82, 196, 0.16); }

/* faint blueprint grid texture at the very top */
.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(27, 42, 85, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 42, 85, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 85% 45% at 50% 0%, black 0%, transparent 75%);
  z-index: 0;
}

.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdd3e3; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b3bbd2; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* boot splash */
.boot-splash {
  position: fixed; inset: 0; display: grid; place-content: center; gap: 18px;
  justify-items: center; z-index: 99; background: var(--bg);
}
.boot-mark {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid rgba(53, 82, 196, 0.18);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
.boot-text { color: var(--ink-dim); letter-spacing: 0.06em; font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.anim-rise { animation: rise var(--slow) both; }