/* ============================================================
   YAFNAH & CO — SHARED FOUNDATION
   Tokens, type, reset. Identical across all variants.
   Palette is locked: see CLAUDE.md. Do not add colours here.
   ============================================================ */

@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Thin.woff2') format('woff2');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-ExtraLight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ── Brand, locked ── */
  --rimal:#FFE4C4;          /* the sands */
  --ghaf:#006039;           /* national tree */
  --bakhoor:#38250E;        /* incense wood */
  --sidr:#7A8971;           /* sidr tree — FILL ONLY, never text */
  /* --dhahab:#A37E2C is FINISH ONLY (foil / metallic ink). Never a CSS fill. */

  /* ── Warm neutral ramp: tints of Bakhoor. Never introduce a cold grey. ── */
  --t100:#38250E;  /* body text        */
  --t80:#60513E;   /* secondary text   */
  --t60:#887C6E;   /* placeholder, disabled (large text only) */
  --t40:#AFA89F;   /* borders          */
  --t25:#CDC8C3;   /* dividers         */
  --t12:#E7E5E2;   /* subtle fills     */
  --t06:#F3F2F1;   /* near-white surface, cool */
  --surface:#FFFCF8; /* warm near-white, for controls sitting on paper */
  --surface-2:#F6EFE6; /* warm muted fill: waiting and disabled states */
  --surface-line:#E4D8C8; /* warm hairline to match the two above */

  --ghaf-deep:#00432a;
  --ghaf-tint:rgba(0,96,57,.07);
  --rimal-soft:#FFF1E1;

  /* ── Type ── */
  --font:'IBM Plex Sans Arabic','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* NEVER add a serif to that stack. Brand rule. */

  --fs-nav:15px;
  --fs-xs:12px; --fs-sm:13.5px; --fs-base:16px; --fs-md:18px;
  --fs-lg:22px; --fs-xl:28px; --fs-2xl:36px; --fs-3xl:48px; --fs-4xl:64px;

  /* ── Space ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:140px;

  --wrap:1200px;
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:320ms;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:1.55;
  color:var(--t100);
  background:var(--t06);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Arabic sits taller in IBM Plex Sans Arabic — give it room. Western numerals in both scripts. */
html[lang="ar"] body{line-height:1.78}
html[lang="ar"]{font-feature-settings:"lnum" 1}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:500;line-height:1.14;letter-spacing:-.015em}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0;line-height:1.3}

/* ── Focus: visible, always. Never remove. ── */
:focus-visible{outline:2px solid var(--ghaf);outline-offset:3px;border-radius:var(--radius)}
[dir="rtl"] :focus-visible{outline-offset:3px}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--ghaf);color:#fff;padding:var(--s3) var(--s5);font-size:var(--fs-sm)}
.skip:focus{inset-inline-start:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
@media(max-width:640px){.wrap{padding-inline:var(--s4)}}

/* Latin numerals, phone numbers and time ranges must not be reordered by
   the bidi algorithm when the page flips to RTL. Isolate them. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

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

/* Language visibility — one dictionary, two scripts. */
[data-en],[data-ar]{display:inline-block}
html[lang="en"] .only-ar,html[lang="ar"] .only-en{display:none}

/* Shared motion primitive */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}