/* ============================================================================
   مرصاد — design tokens (liquid-glass-vue skill, Thmanyah edition).
   Imported once, globally. Everything else reads these CSS variables.
   ============================================================================ */

/* Thmanyah Sans — the UI face (full Arabic + Latin coverage), self-hosted. */
@font-face { font-family: 'Thmanyah Sans'; src: url('/fonts/thmanyahsans-Light.woff2') format('woff2');   font-weight: 300; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('/fonts/thmanyahsans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('/fonts/thmanyahsans-Medium.woff2') format('woff2');  font-weight: 500; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('/fonts/thmanyahsans-Bold.woff2') format('woff2');    font-weight: 700; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('/fonts/thmanyahsans-Black.woff2') format('woff2');   font-weight: 900; font-display: swap; }

/* Thmanyah Serif Display — the مرصاد wordmark ONLY (not the UI). */
@font-face { font-family: 'Thmanyah Display'; src: url('/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');  font-weight: 700; font-display: swap; }
@font-face { font-family: 'Thmanyah Display'; src: url('/fonts/thmanyahserifdisplay-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  /* type */
  --font-ui: 'Thmanyah Sans', system-ui, -apple-system, sans-serif;
  --font-num: 'Thmanyah Sans', system-ui, sans-serif;
  --font-logo: 'Thmanyah Display', 'Thmanyah Sans', serif;   /* wordmark only */
  --fs-xs: 0.75rem;  --fs-sm: 0.875rem; --fs-md: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.5rem;   --fs-2xl: 2rem;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 700; --fw-bold: 700;

  /* shape + motion */
  --radius-sm: 10px; --radius-md: 14px; --radius-glass: 22px; --radius-pill: 999px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 220ms;

  /* ---- THE theme (light only — matches the light-v11 basemap) ------------ */
  --bg: #E3E3DC;
  --surface: #FFFFFF;
  --ink-strong: #16243F;
  --ink: #3A4658;
  --ink-soft: #6B7686;

  --glow-cyan: #1E8FD6;
  --glow-core: #2BB1FF;
  --accent-mint: #11A37A;
  --route-blue: #2E6BFF;
  --route-violet: #6E5BFF;
  --danger: #D83A3A;
  --warn: #C77D11;
  --fire: #E85D04;               /* FIRMS fires */
  --quake: #C2410C;              /* earthquakes */

  /* event importance (GDELT) — shared with the map pins */
  --imp-high: #E33B3B;
  --imp-medium: #E0A23E;
  --imp-low: #2FA36B;

  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-sheen: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 24px 60px -20px rgba(20, 35, 60, 0.35);
  --glow-opacity: 0.45;
}

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  font-weight: var(--fw-reg);
  background: var(--bg);
  color: var(--ink-strong);
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

html[dir='rtl'] { direction: rtl; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--glow-cyan) 70%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}