/* Shared design tokens + base reset for the public-facing pages
   (index.html, marketplace.html). Not used by admin.html, which has its
   own distinct dark-dashboard palette. */

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

:root {
  --bg: #F4EFE5;
  --bg2: #EBE3D5;
  --surface: rgba(255, 255, 255, 0.92);
  --surface2: rgba(250, 245, 236, 0.86);
  --surface3: rgba(238, 228, 212, 0.78);
  --border: rgba(0, 0, 0, 0.07);
  --border2: rgba(0, 0, 0, 0.12);
  --border3: rgba(0, 0, 0, 0.20);
  --ink: #180A0C;
  --ink2: #3A1C20;
  --muted: #7A5A5E;
  --hint: #A89090;
  --gold: #C1121F;
  --gold2: #E8363D;
  --gold-dim: rgba(193, 18, 31, 0.09);
  --gold-glow: rgba(193, 18, 31, 0.28);
  --green: #007A3D;
  --green-dim: rgba(0, 122, 61, 0.10);
  --red: #E03030;
  --red-dim: rgba(224, 48, 48, 0.10);
  --plate-red: #C1121F;
  --plate-bg: #FFFFFF;
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
  --shadow2: 0 4px 20px rgba(0, 0, 0, 0.08);
  --r: 16px;
  --r2: 10px;
  --r3: 8px;
  --nav-bg: rgba(244, 239, 229, 0.92);
}

[data-theme="dark"] {
  --bg: #0E0709;
  --bg2: #180C0F;
  --surface: rgba(32, 14, 18, 0.92);
  --surface2: rgba(48, 20, 25, 0.88);
  --surface3: rgba(64, 28, 33, 0.82);
  --border: rgba(193, 18, 31, 0.12);
  --border2: rgba(193, 18, 31, 0.22);
  --border3: rgba(193, 18, 31, 0.36);
  --ink: #FBF6F0;
  --ink2: #E8D5C8;
  --muted: #A08878;
  --hint: #6E5050;
  --gold-dim: rgba(193, 18, 31, 0.12);
  --gold-glow: rgba(193, 18, 31, 0.4);
  --green-dim: rgba(0, 122, 61, 0.14);
  --red: #F87171;
  --red-dim: rgba(248, 113, 113, 0.12);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.75);
  --shadow2: 0 4px 20px rgba(0, 0, 0, 0.5);
  --nav-bg: rgba(14, 7, 9, 0.88);
}

body.ar {
  font-family: 'Noto Sans Arabic', 'Inter', sans-serif;
}

::-webkit-scrollbar {
  width: 6px
}

::-webkit-scrollbar-track {
  background: transparent
}

::-webkit-scrollbar-thumb {
  background: var(--surface3);
  border-radius: 99px
}

/* ── JORDANIAN TATREEZ CANVAS BACKGROUND ─────────────────────────────────
   Shared decorative background (canvas pattern + flag stripe + floating
   geometry) — used by index.html and marketplace.html via a #jo-canvas
   element + .jo-stripe markup; theme.js's initTatreez() is a no-op if
   #jo-canvas isn't present, so this is harmless on pages that omit it. */
#jo-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* All direct body children above the canvas. Excludes elements that set
   their own position:fixed (.toast, .modal-overlay) — :not(#jo-canvas)
   carries ID-level specificity, which would otherwise beat their own
   single-class position:fixed rule and silently demote them to
   position:relative, pinning them at their in-flow DOM position instead
   of the viewport (this broke every toast notification sitewide). */
body > *:not(#jo-canvas):not(.toast):not(.modal-overlay) {
  position: relative;
  z-index: 1;
}

/* ── JORDAN FLAG STRIPE ───────────────────────────────────────────────── */
.jo-stripe {
  height: 3px;
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 100;
}
.jo-stripe .s-black { flex: 1; background: #000; }
.jo-stripe .s-white { flex: 1; background: #fff; }
.jo-stripe .s-green { flex: 1; background: #007A3D; }
.jo-stripe .s-red   { flex: 1; background: #C1121F; }

/* ── FLOATING GEO ELEMENTS ────────────────────────────────────────────── */
@keyframes floatUp {
  0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateY(-12vh) rotate(360deg); opacity: 0; }
}
@keyframes floatDrift {
  0%   { transform: translateY(0)   rotate(0deg)   scale(1); }
  33%  { transform: translateY(-22px) rotate(8deg)  scale(1.04); }
  66%  { transform: translateY(10px)  rotate(-5deg) scale(0.97); }
  100% { transform: translateY(0)   rotate(0deg)   scale(1); }
}
.jo-geo {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  animation: floatDrift linear infinite;
}