/* ============================================================
   Base — resets, typography defaults, layout primitives.
   Builds on tokens.css.
   ============================================================ */

/* ── Scale-up overrides ──────────────────────────────────────
   The design-system tokens are tuned for a 1280px artboard.
   On a real website rendered at 1440-1920px viewport, they
   read undersized. Bump type ~15% and widen the container so
   content fills the screen without losing brand proportions. */
:root {
  /* Type scale — uniformly larger */
  --kh-fs-xs:   12px;
  --kh-fs-sm:   14px;
  --kh-fs-md:   17px;
  --kh-fs-lg:   20px;
  --kh-fs-xl:   24px;
  --kh-fs-2xl:  34px;
  --kh-fs-3xl:  50px;
  --kh-fs-4xl:  74px;
  --kh-fs-5xl:  96px;

  /* Container & section rhythm */
  --kh-container-max: 1440px;
  --kh-container-pad: 64px;
  --kh-section-y:     104px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--kh-sans);
  font-size: var(--kh-fs-md);
  line-height: 1.55;
  color: var(--kh-fg);
  background: var(--kh-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--kh-saffron); outline-offset: 2px; border-radius: 4px; }

/* ── Layout primitives ───────────────────────────────────── */
.kh-container {
  width: 100%;
  max-width: var(--kh-container-max);
  margin-inline: auto;
  padding-inline: var(--kh-container-pad);
}
.kh-section {
  padding-block: var(--kh-section-y);
}
.kh-section--tight { padding-block: 56px; }

.kh-section--cream-2 { background: var(--kh-cream-2); }
.kh-section--paper   { background: var(--kh-paper); }
.kh-section--dark {
  background: var(--kh-navy-deep);
  color: var(--kh-on-dark);
  position: relative;
  overflow: hidden;
}
.kh-section--dark .kh-h1,
.kh-section--dark .kh-h2,
.kh-section--dark .kh-h3,
.kh-section--dark .kh-h4 { color: var(--kh-on-dark); }
.kh-section--dark .kh-body { color: rgba(247,241,225,.78); }
.kh-section--dark .kh-eyebrow { color: var(--kh-saffron); }

/* Section header pattern — eyebrow + heading + supporting copy */
.kh-section-head {
  margin-bottom: var(--kh-s-10);
  max-width: 720px;
}
.kh-section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kh-s-6);
  max-width: none;
}
.kh-section-head .kh-eyebrow { display: block; margin-bottom: var(--kh-s-3); }
.kh-section-head h2 { margin: 0 0 var(--kh-s-4); }
.kh-section-head p  { margin: 0; }

/* Italic accent — one word inside a heading */
.kh-accent {
  font-family: var(--kh-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--kh-coral);
  letter-spacing: -0.015em;
}
.kh-accent--saffron { color: var(--kh-saffron); }
.kh-accent--teal    { color: var(--kh-teal); }

/* Inline mono (durations, step counters) */
.kh-num { font-family: var(--kh-mono); letter-spacing: -0.01em; }

/* Subtle dividers */
.kh-divider {
  height: 1px;
  background: var(--kh-line);
  border: none;
  margin: 0;
}

/* Utility */
.kh-row { display: flex; gap: var(--kh-s-3); flex-wrap: wrap; align-items: center; }
.kh-stack-sm > * + * { margin-top: var(--kh-s-3); }
.kh-stack    > * + * { margin-top: var(--kh-s-5); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Reveal-on-scroll ───────────────────────────────────── */
.kh-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 320ms var(--kh-ease), transform 320ms var(--kh-ease);
  will-change: opacity, transform;
}
.kh-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .kh-reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── RTL adjustments ───────────────────────────────────── */
/* Arabic flips the page direction; the design tokens already
   switch body to Tajawal, but the heading classes set their
   own font-family — override them here. Also: arrows flip,
   the Instrument-Serif italic accent is replaced with a
   Tajawal-saffron accent (italic isn't native to Arabic). */

[dir="rtl"] .kh-h1, [dir="rtl"] .kh-h2,
[dir="rtl"] .kh-h3, [dir="rtl"] .kh-h4,
[dir="rtl"] .kh-display,
[dir="rtl"] .kh-hero__title,
[dir="rtl"] .kh-pageheader__title,
[dir="rtl"] .kh-cta__title {
  font-family: var(--kh-arabic);
  letter-spacing: 0;
  line-height: 1.2;
}

/* Arabic accent — saffron Tajawal, no italic */
[dir="rtl"] .kh-accent,
[dir="rtl"] .kh-accent--saffron,
[dir="rtl"] .kh-accent--teal {
  font-family: var(--kh-arabic);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

/* Arrow icons flip horizontally in RTL */
[dir="rtl"] .kh-arrow { transform: scaleX(-1); }
[dir="rtl"] .kh-link svg { transform: scaleX(-1); }
[dir="rtl"] .kh-link:hover svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .kh-btn:hover svg.kh-arrow { transform: scaleX(-1) translateX(3px); }

/* Mono numbers / counters stay LTR even inside RTL paragraphs */
[dir="rtl"] .kh-num { direction: ltr; unicode-bidi: isolate; }

/* Eyebrows & form labels: drop ALL CAPS in Arabic */
[dir="rtl"] .kh-eyebrow,
[dir="rtl"] .kh-label,
[dir="rtl"] .kh-footer__col-title {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Testimonial quote glyph — switch to Arabic guillemets */
[dir="rtl"] .kh-testimonial__quote::before { content: '«'; font-family: var(--kh-arabic); font-style: normal; }
[dir="rtl"] .kh-testimonial__quote::after  { content: '»'; color: var(--kh-coral); margin-inline-start: 4px; }

/* Hero visual card direction (mono time stays LTR via dir="ltr" attr) */
[dir="rtl"] .kh-hero__visual-label { direction: ltr; }

/* ── Responsive: laptop ─────────────────────────────────── */
@media (max-width: 1280px) {
  :root {
    --kh-container-pad: 48px;
    --kh-section-y:     88px;
    --kh-fs-3xl: 44px;
    --kh-fs-4xl: 64px;
    --kh-fs-5xl: 80px;
  }
}

/* ── Responsive: tablet ─────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --kh-container-pad: 32px;
    --kh-section-y:     72px;
    --kh-fs-md: 16px;
    --kh-fs-lg: 18px;
    --kh-fs-2xl: 30px;
    --kh-fs-3xl: 38px;
    --kh-fs-4xl: 54px;
    --kh-fs-5xl: 64px;
  }
}

/* ── Responsive: mobile ─────────────────────────────────── */
@media (max-width: 720px) {
  :root {
    --kh-container-pad: 24px;
    --kh-section-y:     56px;
    --kh-fs-2xl: 26px;
    --kh-fs-3xl: 32px;
    --kh-fs-4xl: 44px;
    --kh-fs-5xl: 52px;
  }
  .kh-section-head--row { flex-direction: column; align-items: flex-start; }
}