@font-face {
  font-family: "Almarai";
  src: url("/assets/fonts/font_01.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "AjrQuran";
  src: url("/assets/fonts/Quran_font.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f8f5ef;
  --surface: #ffffff;
  --surface-soft: #f2eee7;
  --text: #252838;
  --muted: #6f707b;
  --border: #ddd5c8;
  --accent: #4b557e;
  --accent-strong: #343d63;
  --accent-deep: #252d4b;
  --accent-soft: #e8eaf3;
  --focus: #4b557e;
  --danger: #96453f;
  --brand-warm: #c2a15f;
  --brand-warm-soft: #f4ead4;
  --shadow: 0 18px 48px rgba(42, 48, 76, 0.09);
  --shadow-soft: 0 10px 30px rgba(42, 48, 76, 0.065);
  --shadow-raised: 0 4px 0 rgba(37, 45, 75, .18), 0 12px 24px rgba(42, 48, 76, .12);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --container: 1160px;
  --font-family: "Almarai", Tahoma, Arial, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 82% 4%, rgba(194, 161, 95, .07), transparent 24rem),
    radial-gradient(circle at 12% 18%, rgba(75, 85, 126, .055), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-family);
  line-height: 1.8;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 999;
  padding: .65rem 1rem;
  background: var(--text);
  color: #fff;
  border-radius: 0 0 10px 10px;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent);
  outline-offset: 3px;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.35; }
code { direction: ltr; unicode-bidi: embed; }


/* AJR-014A — V1 visual polish foundation */
::selection { background: color-mix(in srgb, var(--accent) 24%, white); color: var(--accent-deep); }
input, select, textarea { caret-color: var(--accent); }
body { -webkit-font-smoothing: antialiased; }