@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-arabic:  'Noto Naskh Arabic', serif;
  --font-mono:    'DM Mono', monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r-sm:8px;--r-md:16px;--r-lg:20px;--r-xl:28px;
  --t-fast:150ms ease;--t-base:250ms ease;--t-slow:400ms ease;

  /* Pearl (default) — improved contrast */
  --bg:        #D8E4F2;
  --surface:   #FFFFFF;
  --surface-2: #E8F0FA;
  --deep:      #0F2A47;
  --primary:   #1E4E8C;
  --accent:    #3A6EA8;
  --muted:     rgba(15,42,71,0.55);
  --success:   #1A6B45;
  --border:    rgba(15,42,71,0.14);
  --shadow:    rgba(15,42,71,0.12);
  --glow:      rgba(30,78,140,0.1);
  --card-inner:#EBF3FD;
  --num-color: #1E4E8C;
  --nav-bg:    rgba(255,255,255,0.96);
  --icon-dim:  rgba(15,42,71,0.35);
}

[data-theme="night"] {
  --bg:        #080604;
  --surface:   #120E07;
  --surface-2: #1C1509;
  --deep:      #F0E4C8;
  --primary:   #C8963A;
  --accent:    #E2BA7A;
  --muted:     rgba(240,228,200,0.55);
  --success:   #4A8C5C;
  --border:    rgba(200,150,58,0.18);
  --shadow:    rgba(0,0,0,0.5);
  --glow:      rgba(200,150,58,0.1);
  --card-inner:#0E0A05;
  --num-color: #C8963A;
  --nav-bg:    rgba(12,9,5,0.97);
  --icon-dim:  rgba(240,228,200,0.35);
}

[data-theme="emerald"] {
  --bg:        #040C08;
  --surface:   #0A1C12;
  --surface-2: #0E2418;
  --deep:      #EDE4C4;
  --primary:   #C8963A;
  --accent:    #7EC89A;
  --muted:     rgba(237,228,196,0.55);
  --success:   #2A7A4A;
  --border:    rgba(126,200,154,0.2);
  --shadow:    rgba(0,0,0,0.55);
  --glow:      rgba(30,80,45,0.25);
  --card-inner:rgba(20,60,35,0.3);
  --num-color: #C8963A;
  --nav-bg:    rgba(4,10,7,0.97);
  --icon-dim:  rgba(237,228,196,0.35);
}

body,*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

body {
  font-family: var(--font-arabic);
  background: var(--bg);
  color: var(--deep);
  min-height: 100dvh;
  direction: rtl;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body,.card,.btn,.choice,.tile {
  transition: background var(--t-slow), border-color var(--t-slow), color var(--t-slow);
}

.num {
  font-family: var(--font-mono);
  direction: ltr;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  color: var(--num-color);
}

/* Typography */
.t-display { font-family:var(--font-display); font-weight:300; letter-spacing:-0.02em; line-height:1.1; }
.t-title   { font-size:1.8rem; font-weight:700; line-height:1.2; }
.t-heading { font-size:1.2rem; font-weight:600; }
.t-body    { font-size:1rem;   font-weight:400; }
.t-small   { font-size:0.875rem; font-weight:400; }
.t-micro   { font-size:0.75rem;  font-weight:400; }
.t-muted   { color: var(--muted); }
.t-primary { color: var(--primary); }

/* Layout */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--s5);
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  min-height: 100dvh;
}

.flex          { display:flex; }
.flex-col      { display:flex; flex-direction:column; }
.items-center  { align-items:center; }
.justify-center{ justify-content:center; }
.justify-between{justify-content:space-between; }
.gap-1{gap:var(--s2);}
.gap-2{gap:var(--s4);}
.gap-3{gap:var(--s5);}
.w-full{width:100%;}
.text-center{text-align:center;}
.flex-1{flex:1;}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.card-inner {
  background: var(--card-inner);
  border-radius: var(--r-md);
  padding: var(--s4);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-arabic);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  padding: 14px var(--s5);
  width: 100%;
  transition: transform var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
  -webkit-user-select: none;
  user-select: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 16px var(--glow);
}
.btn-primary:hover { opacity: 0.92; }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--border);
}

.btn-sm {
  padding: 10px var(--s4);
  font-size: 0.9rem;
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 0 8px;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-arabic);
  color: var(--icon-dim);
  transition: color var(--t-fast);
  text-decoration: none;
}
.nav-item.active { color: var(--primary); }
.nav-item svg { width:22px; height:22px; stroke-width:1.8; }
.nav-label { font-size: 0.68rem; font-weight: 500; }

/* Animations */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.92); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes pulse-ring {
  0%   { transform:scale(1);   opacity:0.6; }
  100% { transform:scale(1.6); opacity:0; }
}

.animate-in        { animation: fadeUp 0.5s ease both; }
.animate-scale     { animation: scaleIn 0.4s cubic-bezier(0.16,1,0.3,1) both; }
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }

/* Section headers */
.section-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: var(--s3);
}

/* Toggle */
.toggle {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-base);
}
.toggle-slider::before {
  content:'';
  position:absolute;
  width:20px; height:20px;
  left:3px; top:3px;
  background:#fff;
  border-radius:50%;
  transition: transform var(--t-base);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  margin: var(--s4) 0;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  background: var(--glow);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
}

/* Progress bar */
.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}

/* Input */
.input {
  width: 100%;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px var(--s4);
  font-family: var(--font-arabic);
  font-size: 1rem;
  color: var(--deep);
  outline: none;
  direction: rtl;
  transition: border-color var(--t-fast);
}
.input:focus { border-color: var(--primary); }
.input::placeholder { color: var(--muted); }