/* ═══════════════════════════════════════════════════════════════
   BASE.CSS — root tokens, reset, typography, motion & focus rules
   ═══════════════════════════════════════════════════════════════ */
:root{
  --void:#020308; --deep:#050915;
  --surface:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);
  --text:#EDE8D8; --dim:rgba(237,232,216,0.42);
  --accent:#C8A96E; --glow:rgba(200,169,110,0.35);
  --danger:#D97757;
  --r:16px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:15px; -webkit-tap-highlight-color:transparent; }
body{
  font-family:'Hind Siliguri',sans-serif;
  background:var(--void); color:var(--text);
  min-height:100dvh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
[lang="ar"] body, [lang="ur"] body{ font-family:'Noto Naskh Arabic','Hind Siliguri',sans-serif; }

::-webkit-scrollbar{ width:3px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(200,169,110,0.25); border-radius:3px; }

body::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size:200px; opacity:.5;
}

/* ─── Icons ─── */
.icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; flex-shrink:0; }
.trad-mark{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; flex-shrink:0; }
button{ font:inherit; }
.icon-btn{
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(2,3,8,.7);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--dim); transition:all .3s;
  font-size:1rem;
}
.icon-btn.on{ color:var(--accent); border-color:rgba(200,169,110,.4); }

/* ─── Keyboard focus (never removed — only styled) ───
   Skill floor: "visible keyboard focus, reduced motion respected." */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.icon-btn:focus-visible, .trad-card:focus-visible, .btn:focus-visible{
  outline-offset:2px;
}

/* ─── Reduced motion ───
   Timing that IS the content (breath pacing, silence countdown)
   stays; everything purely decorative shortens or stops. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .sigil-wrap svg{ animation:none !important; }
  .sigil-bg{ animation:none !important; }
  .sacred-word{ animation:none !important; }
  .silence-words{ animation:none !important; }
  .refl-glow{ animation:none !important; }
  .br{ transition-duration:1.2s !important; }
  .breath-vis .br{ transition-timing-function:ease-in-out !important; }
}

/* ─── Screen-reader only helper ─── */
.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}