/* Raqyan shared design system — tokens, reset, buttons, footer.
   Page-specific styles (shadows, body, wrap width, header, sections)
   remain in each page's inline <style> block. */

:root {
  --night: #16143a;
  --indigo: #262261;
  --coral: #eb5e36;
  --coral-deep: #c8431f;
  --amber: #f4a02c;
  --cream: #fdf5ea;
  --ink: #4a4640;
  --indigo-100: #e7e5f1;
  --indigo-mid: #6862ad;
  --cream-deep: #f3e9da;
  --font-display: "Sora", -apple-system, sans-serif;
  --font-body: "Onest", -apple-system, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", sans-serif;
  --shadow-sm: 0 1px 3px rgba(38, 34, 97, 0.08);
  --shadow-md: 0 14px 34px rgba(38, 34, 97, 0.13);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::selection {
  background: var(--coral);
  color: var(--cream);
}

.btn-primary {
  background: var(--coral);
  color: var(--cream);
  box-shadow: var(--shadow-coral);
}
.btn-primary:hover {
  background: var(--coral-deep);
  transform: translateY(-2px);
}

.site-foot {
  background: var(--night);
  color: rgba(253, 245, 234, 0.6);
  padding: 42px 0 34px;
}
.site-foot .fw {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.site-foot .fb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.site-foot .fb svg {
  width: 28px;
  height: 28px;
}
.site-foot .fb span {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cream);
  font-size: 19px;
  letter-spacing: -0.03em;
}
.site-foot .fl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.site-foot .fl a {
  color: rgba(253, 245, 234, 0.62);
  text-decoration: none;
  font-size: 14.5px;
  transition: color 0.2s;
}
.site-foot .fl a:hover {
  color: var(--coral);
}
.site-foot .fc {
  font-size: 13px;
  opacity: 0.7;
}