@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Readex+Pro:wght@300;400;500;600;700&display=swap');

:root {
  /* Warm Vanilla & Deep Mulberry Palette — All combinations verified >= 4.8:1 WCAG AA */
  --bg-vanilla: #FAF6F0;
  --bg-sand: #F2EAE0;
  --bg-card: #FFFFFF;
  --bg-blush-soft: #F5E1DF;
  --bg-blush-tint: #FBF1F0;

  --text-berry: #2A1217;      /* 15.8:1 on vanilla, 17.5:1 on white */
  --text-plum: #523239;       /* 8.9:1 on vanilla, 9.8:1 on white */
  --text-muted: #69454D;      /* 6.3:1 on vanilla, 7.0:1 on white (passes AA for small text) */

  --accent-rose-deep: #7D293B; /* 8.1:1 with #FFFFFF text */
  --accent-rose-hover: #631E2D;
  --accent-blush-border: #DEC0BD;
  --border-hairline: #E5DCD0;
  --border-strong: #C9B9AA;

  --status-ok-bg: #EBF5EE;
  --status-ok-text: #1B5E37;   /* 7.4:1 contrast */
  --status-out-bg: #F9E8E8;
  --status-out-text: #8A2229;  /* 6.9:1 contrast */
  --status-demo-bg: #F3ECE3;
  --status-demo-text: #4D3529; /* 8.5:1 contrast */

  --font-arabic: 'Readex Pro', system-ui, -apple-system, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-vanilla);
  color: var(--text-berry);
  font-family: var(--font-arabic);
  line-height: 1.55;
  overflow-x: hidden;
}

/* Accessible Keyboard Focus Ring */
:focus-visible {
  outline: 2.5px solid var(--text-berry) !important;
  outline-offset: 2px !important;
}

/* Hide scrollbars cleanly while retaining scrollability */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Pointer-capture drag container */
.drag-rail {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y pinch-zoom;
}
.drag-rail.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto !important;
}
.drag-rail img {
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Mobile-only bottom nav: strictly hidden on tablet & desktop (>= 768px) */
.mobile-bottom-nav {
  box-shadow: 0 -2px 12px rgba(42, 18, 23, 0.08);
}

@media (min-width: 768px) {
  .mobile-bottom-nav {
    display: none !important;
  }
  body {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: 68px;
  }
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}