/* =====================================================================
   هُدى · Huda Alkaabi — Brand tokens & shared components  (mockup v0.1)
   ---------------------------------------------------------------------
   Everything brand-level lives here so it can move 1:1 into the
   WordPress theme later (tokens → theme.json, components → blocks).
   Fonts are loaded via <link> in each page <head>.
   ===================================================================== */

:root {
  /* ---- Palette ------------------------------------------------------ */
  --pearl:      #FAF6F0;  /* لؤلؤ   — main background                     */
  --paper:      #FFFDF9;  /* ورق    — cards, lighter surfaces              */
  --linen:      #F2EAE0;  /* كتّان   — alternate sections                  */
  --sand:       #E6D8C6;  /* رمل    — shapes behind images, dividers      */
  --khoos:      #8C6A4C;  /* خوص    — primary accent: buttons, links      */
  --khoos-soft: #B89878;  /* خوص فاتح — ornaments, icons, hairlines       */
  --khoos-pale: #D9C4AA;  /* خوص على الداكن — accents on palm backgrounds  */
  --palm:       #3B2A20;  /* نخلة   — ink, headings, dark sections        */
  --palm-2:     #4A372B;  /*          raised surfaces on dark              */
  --jujube:     #74231C;  /* عنّابي  — highlight, use sparingly            */
  --ghaf:       #7E8264;  /* غاف    — nature accent (icons, tags)         */
  --ghaf-deep:  #5F6447;  /*          ghaf as text                         */
  --text:       #6E6157;  /* body copy                                     */
  --line:       #E7DCCE;  /* hairlines on light                            */
  --on-dark:    rgba(250, 246, 240, .76);
  --line-dark:  rgba(250, 246, 240, .14);

  /* ---- Type --------------------------------------------------------- */
  --font-display: 'Markazi Text', 'Amiri', serif;
  --font-logo:    'Amiri', serif;
  --font-sign:    'Aref Ruqaa', 'Amiri', serif;
  --font-body:    'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-latin:   'Cormorant Garamond', Georgia, serif;

  --fs-h1:   clamp(2.75rem, 1.5rem + 4.4vw, 4.85rem);
  --fs-h2:   clamp(2.05rem, 1.45rem + 2.3vw, 3.2rem);
  --fs-h3:   clamp(1.55rem, 1.35rem + .6vw, 1.9rem);
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm:   .9375rem;
  --fs-xs:   .8125rem;

  /* ---- Space & shape ------------------------------------------------ */
  --container: 1240px;
  --gutter:    clamp(16px, 4vw, 40px);
  --section:   clamp(76px, 9vw, 132px);
  --radius:    18px;
  --radius-lg: 28px;
  --shadow:    0 1px 2px rgba(59, 42, 32, .04), 0 14px 34px -14px rgba(59, 42, 32, .16);
  --shadow-lg: 0 2px 6px rgba(59, 42, 32, .05), 0 34px 70px -28px rgba(59, 42, 32, .34);
  --ease:      cubic-bezier(.2, .7, .2, 1);
}

/* ---- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pearl);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.32;
  color: var(--palm);
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--sand); color: var(--palm); }
:focus-visible { outline: 2px solid var(--khoos); outline-offset: 3px; border-radius: 6px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section   { padding-block: var(--section); position: relative; }
.sr-only   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Arabic must never be letter-spaced (it breaks the joins).
   Tracking is reserved for Latin (.latin). */
.latin { font-family: var(--font-latin); direction: ltr; unicode-bidi: isolate; font-variant-numeric: lining-nums; }

/* ---- Logo ------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: .32em; color: var(--palm); line-height: 1; }
.logo__mark { width: 1.22em; height: 1.22em; flex: none; color: var(--khoos); }
.logo__word { font-family: var(--font-logo); font-weight: 700; line-height: 1; padding-top: .14em; }

.logo-stack { display: inline-flex; flex-direction: column; align-items: center; color: var(--palm); text-align: center; }
.logo-stack__mark { width: 1.1em; height: 1.1em; color: var(--khoos); margin-bottom: -.06em; }
.logo-stack__word { font-family: var(--font-logo); font-weight: 400; font-size: 1em; line-height: 1.25; }
.logo-stack__latin {
  font-family: var(--font-latin); font-weight: 600; direction: ltr;
  font-size: .17em; letter-spacing: .42em; padding-left: .42em; /* optically re-centre tracked caps */
  color: var(--khoos); margin-top: .35em;
}
.logo-stack .ornament { margin-top: .55em; font-size: .2em; }

/* ---- Ornament: line · diamond · line (from the talli / poster divider) -- */
.ornament { display: inline-flex; align-items: center; gap: .7em; color: var(--khoos-soft); }
.ornament::before, .ornament::after { content: ""; width: 3.6em; height: 1px; background: currentColor; opacity: .75; }
.ornament i { width: .5em; height: .5em; background: currentColor; transform: rotate(45deg); }

/* ---- Eyebrow ---------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: var(--fs-sm); font-weight: 500; color: var(--khoos);
  margin-bottom: 1.15rem; line-height: 1.6;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }

/* ---- Buttons & links -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.8rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--khoos); color: var(--pearl); }
.btn--primary:hover { background: var(--palm); }
.btn--ghost { border-color: var(--sand); color: var(--palm); background: transparent; }
.btn--ghost:hover { border-color: var(--khoos); color: var(--khoos); }
.btn--light { background: var(--pearl); color: var(--palm); }
.btn--light:hover { background: var(--khoos-pale); }
.btn--sm { min-height: 44px; padding: 0 1.35rem; font-size: .9375rem; }
.btn .icon { width: 18px; height: 18px; }

.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; font-size: var(--fs-sm); color: var(--khoos); }
.link-arrow .icon { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.link-arrow:hover .icon { transform: translateX(-5px); } /* RTL: forward = left */

/* ---- Icons (SVG sprite) ----------------------------------------------- */
.icon { width: 24px; height: 24px; flex: none; }

/* ---- Arch frame: the “space / doorway” shape --------------------------
   Exact semicircle top for a 4:5 frame (vertical radius = 40% of height). */
.arch {
  position: relative; overflow: hidden; background: var(--sand);
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
}
.arch--square { aspect-ratio: 1; border-radius: 50% 50% var(--radius) var(--radius) / 50% 50% var(--radius) var(--radius); }
.arch img { width: 100%; height: 100%; object-fit: cover; }

/* Warm, quiet image treatment that pulls mixed sources into one family */
.tone { filter: saturate(.86) sepia(.07) contrast(1.02); }
.tone--strong { filter: saturate(.55) sepia(.22) contrast(1.02); }

/* ---- Badges ----------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .85rem; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.5;
  background: var(--linen); color: var(--khoos);
}
.badge--ghaf   { background: #E9EADF; color: var(--ghaf-deep); }
.badge--jujube { background: #F4E4E0; color: var(--jujube); }
.badge--glass  { background: rgba(255, 253, 249, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---- Braid band: palm-weave (khoos) pattern ---------------------------- */
.braid {
  height: 14px; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M0 0h4.6L12 7H7.4z' fill='%23B89878'/%3E%3Cpath d='M0 14h4.6L12 7H7.4z' fill='%23D9C4AA'/%3E%3C/svg%3E") repeat-x center / auto 100%;
}
.braid--dark { opacity: .35; }

/* ---- Frond shadow: light through palm leaves on a wall ----------------- */
.frond-shadow { position: absolute; pointer-events: none; color: var(--palm); opacity: .065; filter: blur(3px); z-index: 0; }

/* ---- Paper grain for dark sections ------------------------------------ */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Scroll reveal (only when JS is on; off for reduced motion) -------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }
.js .reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}