/* ============================================================
   base.css — Design tokens, reset, global typography
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Background layers */
  --color-ink:        #09090e;
  --color-deep:       #0d1117;
  --color-surface:    #131a23;
  --color-card:       #18212d;
  --color-border:     #1f2e42;

  /* Gold palette */
  --color-gold:       #c9a84c;
  --color-gold-light: #e6c96e;
  --color-gold-dim:   #6e5224;
  --color-gold-glow:  rgba(201, 168, 76, 0.18);

  /* Teal palette (Prophet theme) */
  --color-teal:       #1a7a6e;
  --color-teal-light: #22b0a0;
  --color-teal-glow:  rgba(34, 176, 160, 0.15);

  /* Text */
  --color-text:       #d8e8f2;
  --color-muted:      #6a8aaa;
  --color-white:      #f2ede4;

  /* Typography */
  --font-arabic:      'Noto Naskh Arabic', 'Amiri', serif;
  --font-display:     'Amiri', serif;
  --font-latin:       'Cinzel', serif;

  /* Spacing scale */
  --sp-xs:  0.4rem;
  --sp-sm:  0.8rem;
  --sp-md:  1.2rem;
  --sp-lg:  2rem;
  --sp-xl:  3rem;
  --sp-2xl: 5rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Transitions */
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  0.18s;
  --t-base:  0.28s;
  --t-slow:  0.5s;
}

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

html { scroll-behavior: smooth; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

ol, ul { list-style: none; }

/* ── Body ──────────────────────────────────────────────────── */
body {
  font-family: var(--font-arabic);
  background-color: var(--color-ink);
  color: var(--color-text);
  direction: rtl;
  min-height: 100vh;
  overflow-x: hidden;
  /* Ambient gradient */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -5%,  rgba(201,168,76,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 85% 95%,  rgba(26,122,110,0.05) 0%, transparent 55%);
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGold {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.85; }
}

@keyframes shimmer {
  from { stroke-dashoffset: 283; }
  to   { stroke-dashoffset: 0; }
}