/* ═══════════════════════════════════════════════════════════════════════════
   IMMERSA — Base Layer (Phase 27 · UI Refinement · Foundation)
   ───────────────────────────────────────────────────────────────────────────
   Loaded immediately after tokens.css. Provides:
     - Normalised box-sizing and reset.
     - Body typography defaults — Tajawal-first for Arabic, uses --font-sans.
     - prefers-reduced-motion global override (WCAG 2.3.3).
     - Canonical .sr-only + .skip-link a11y utilities.
     - Baseline :focus-visible ring.

   Phase 1 principle: values match what individual pages already inline,
   so linking this file does not cause visible change. Later phases can
   delete the per-page duplicates once base.css is guaranteed to cover them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tajawal + Sora + Space Mono are loaded per-page via <link rel="preconnect">
   + <link href="fonts.googleapis.com/..."> so the browser can prioritise them
   before this file parses. We do not @import fonts here (would render-block). */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--sans, 'Tajawal', -apple-system, system-ui, sans-serif);
  color: var(--text, #dce8f5);
  background: var(--bg, #05080f);
  line-height: var(--lh-base, 1.55);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga';
  min-height: 100vh;
}

/* Numbers (stats, prices, IDs, counters) use tabular mono — enforced by
   components that opt-in with .num-mono or font-family: var(--mono). */

/* ─── Reduced motion — non-negotiable, WCAG 2.3.3 ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Visually-hidden — for labels, H1s behind 360° canvases, sr text ── */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Skip link — appears only on keyboard focus ─────────────────────── */
.skip-link {
  position: absolute;
  top: -40px;
  inset-inline-start: 8px;
  z-index: 9999;
  padding: 8px 14px;
  background: var(--accent, #00e5ff);
  color: #001014;
  font-family: var(--sans, 'Tajawal', sans-serif);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--r-sm, 6px);
  transition: top var(--dur-fast, 160ms) var(--ease-out, ease);
}
.skip-link:focus { top: 8px; }