/* ===========================================================================
   base.css — reset, typography, signature elements (arch + coupon edge)
   =========================================================================== */

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--graphite);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--rayyan-maroon); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

/* Typographic scale ------------------------------------------------------ */
.display { font-family: var(--font-display); line-height: var(--lh-display); letter-spacing: -.01em; }
h1, .h1 { font-family: var(--font-display); font-size: var(--fs-34); line-height: var(--lh-display); letter-spacing: -.01em; font-weight: 400; }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-26); line-height: var(--lh-display); font-weight: 400; }
h3, .h3 { font-size: var(--fs-20); font-weight: 600; }
.eyebrow { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--graphite-mid); font-weight: 600; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--graphite-mid); }
.small { font-size: var(--fs-13); }
.tiny { font-size: var(--fs-12); }
.strong { font-weight: 600; }
.arabic { font-family: var(--font-arabic); direction: rtl; }

/* The ARCH — pointed-dome motif. Three sanctioned uses only. --------------- */
.arch {
  border-radius: var(--arch-radius);
  display: grid; place-items: center;
  background: var(--rayyan-maroon);
  color: #fff;
  overflow: hidden;
}
.arch--tint { background: var(--rayyan-maroon-tint); color: var(--rayyan-maroon-deep); }
.arch--gold { background: var(--gold); color: #fff; }

/* The COUPON EDGE — perforated boarding-pass tear strip. ------------------- */
.coupon-edge { position: relative; }
.coupon-edge::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 14px;
  background:
    radial-gradient(circle at left, transparent 0 6px, var(--surface) 6px) left / 14px 18px repeat-y;
  border-left: 1px dashed var(--hairline);
}
.coupon-edge--right::before { left: auto; right: -1px; border-left: none; border-right: 1px dashed var(--hairline); transform: scaleX(-1); }

/* Focus ------------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--rayyan-maroon);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Utility layout --------------------------------------------------------- */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.grid { display: grid; gap: var(--sp-4); }
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.cap-curve { border-radius: var(--r); }

/* Route transition — the one orchestrated moment. ------------------------ */
@keyframes route-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.route-anim { animation: route-in var(--t-route) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}