/* ============================================================
   REAPP REHAB · Brand Tokens
   colors_and_type.css — primitive + semantic CSS variables
   ============================================================ */

@font-face {
  font-family: 'Lyon Arabic';
  src: url('fonts/lyon-arabic-display-light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lyon Arabic';
  src: url('fonts/lyon-arabic-display-regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lyon Arabic';
  src: url('fonts/lyon-arabic-display-medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lyon Arabic';
  src: url('fonts/lyon-arabic-display-bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: '29LT Riwaya';
  src: url('fonts/29LT-Riwaya-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Forest palette (primitive colors) ---------- */
  --reapp-peacock:       #1F3D3C;   /* primary — 25% */
  --reapp-deep-sage:     #6F7E62;   /* accent — 10% */
  --reapp-misty-blue:    #7E8B97;   /* secondary — 5% */
  --reapp-warm-ivory:    #F8F7F3;   /* surface — 60% */
  --reapp-charcoal:      #222826;   /* deep contrast */
  --reapp-light-sage:    #B5C9A0;   /* text on dark */
  --reapp-honey:         #C68F55;   /* seasonal / formal covers only */

  /* tonal extensions for UI states (oklch-derived from peacock/sage) */
  --reapp-peacock-700:   #16302F;
  --reapp-peacock-600:   #1F3D3C;
  --reapp-peacock-500:   #2A5251;
  --reapp-peacock-300:   #6E908F;
  --reapp-peacock-100:   #D7DEDD;
  --reapp-peacock-050:   #ECEFEE;

  --reapp-ivory-pure:    #FFFFFF;
  --reapp-ivory-shade:   #EFECE3;   /* one tone deeper than warm ivory */
  --reapp-hairline:      #E2DFD6;   /* for thin separators on ivory */

  /* ---------- Semantic surface + text ---------- */
  --bg:                  var(--reapp-warm-ivory);
  --bg-elevated:         var(--reapp-ivory-pure);
  --bg-shade:            var(--reapp-ivory-shade);
  --bg-inverse:          var(--reapp-peacock);
  --bg-formal:           var(--reapp-charcoal);

  --fg-1:                var(--reapp-peacock);     /* primary text */
  --fg-2:                #455957;                  /* secondary */
  --fg-3:                #7A8584;                  /* tertiary / captions */
  --fg-on-dark:          var(--reapp-warm-ivory);
  --fg-on-dark-soft:     var(--reapp-light-sage);

  --accent:              var(--reapp-deep-sage);
  --accent-soft:         var(--reapp-misty-blue);
  --accent-warm:         var(--reapp-honey);

  --hairline:            var(--reapp-hairline);
  --hairline-strong:     #C9C5B7;
  --hairline-on-dark:    rgba(248, 247, 243, 0.18);

  /* ---------- Typography ---------- */
  --font-display:        'Lyon Arabic', 'Tajawal', 'Noto Naskh Arabic', serif;
  --font-body:           '29LT Riwaya', 'Tajawal', 'Noto Naskh Arabic', serif;

  /* type scale (px). Slightly translated from the print 60–76pt hero spec
     to a screen-comfortable range. line-height 1.95–2.05 for body. */
  --t-hero:              clamp(56px, 7vw, 84px);
  --t-display:           clamp(40px, 4.6vw, 60px);
  --t-h1:                clamp(34px, 3.4vw, 44px);
  --t-h2:                clamp(26px, 2.4vw, 32px);
  --t-h3:                22px;
  --t-h4:                18px;
  --t-body-lg:           16px;
  --t-body:              14px;
  --t-body-sm:           12.5px;
  --t-caption:           11px;
  --t-eyebrow:           11.5px;

  --lh-display:          1.18;
  --lh-heading:          1.32;
  --lh-body:             2.0;        /* spec: 1.95–2.05 */
  --lh-tight:            1.4;

  --ls-eyebrow:          0.32em;     /* eyebrow runs are ALL CAPS / wide */
  --ls-display:          -0.005em;
  --ls-body:             0;

  /* ---------- Spacing (8pt-based, generous for editorial layout) ---------- */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    24px;
  --sp-6:    32px;
  --sp-7:    48px;
  --sp-8:    64px;
  --sp-9:    96px;
  --sp-10:   128px;

  /* gutter the spec calls for ~14–16mm of breathing room */
  --page-margin:         clamp(20px, 4vw, 56px);
  --page-margin-print:   14mm;

  /* ---------- Radii ---------- */
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    10px;     /* spec: event/photo cards round to 10px */
  --r-xl:    16px;
  --r-pill:  999px;

  /* ---------- Shadows (restrained — editorial, not neumorphic) ---------- */
  --shadow-xs: 0 1px 2px rgba(31, 61, 60, 0.05);
  --shadow-sm: 0 1px 3px rgba(31, 61, 60, 0.06), 0 1px 2px rgba(31, 61, 60, 0.04);
  --shadow-md: 0 6px 16px rgba(31, 61, 60, 0.08), 0 2px 4px rgba(31, 61, 60, 0.04);
  --shadow-lg: 0 18px 36px rgba(31, 61, 60, 0.10), 0 4px 10px rgba(31, 61, 60, 0.04);
  --shadow-inset: inset 0 0 0 1px var(--hairline);

  /* ---------- Motion ---------- */
  --ease-calm:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     180ms;
  --dur-base:     280ms;
  --dur-slow:     520ms;

  /* ---------- Layout ---------- */
  --content-max:         1180px;
  --reading-max:         640px;
}

/* ---------- Base reset ---------- */
html {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  direction: rtl;
}

/* ---------- Semantic typography classes ---------- */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  line-height: 1;
}
.t-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: var(--lh-heading);
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}
.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--fg-3);
}
.t-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.55;
  color: var(--fg-1);
  font-style: normal;
  text-wrap: balance;
}

/* numerals: prefer Eastern Arabic-Indic (٠١٢٣٤٥٦٧٨٩) */
.num-arabic { font-feature-settings: "lnum" 0; -moz-font-feature-settings: "lnum" 0; }

/* hairline rule */
.hr-thin { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-6) 0; }
.hr-thin-on-dark { border: 0; border-top: 1px solid var(--hairline-on-dark); }