/* =============================================================================
   BASE.CSS — Al Itqan Decor V2
   Reset, body defaults, typography classes, layout utilities, animations
============================================================================= */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg-primary); color: var(--text-primary); }
body { font-family: var(--font-body-ar); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; }
html[lang="en"] body { font-family: var(--font-body-en); }
img  { display: block; max-width: 100%; height: auto; }
a    { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
svg { display: block; }

/* ── Container ──────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px) { .container { padding-inline: var(--sp-6); } }

/* ── Section wrapper ────────────────────────────────────────────────────── */
.section { padding-block: var(--sp-9); }
@media (min-width: 768px) { .section { padding-block: var(--sp-10); } }

/* ── Background utilities ───────────────────────────────────────────────── */
.bg-bone      { background-color: var(--color-bone); }
.bg-bone-warm { background-color: var(--color-bone-warm); }
.bg-charcoal  { background-color: var(--color-charcoal); color: var(--color-bone); }

/* ── Typography roles ───────────────────────────────────────────────────── */
.type-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.type-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
}
.type-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
}
.type-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.type-body    { font-size: var(--text-base); font-weight: 400; line-height: var(--leading-relaxed); }
.type-body-lg { font-size: var(--text-lg);  font-weight: 400; line-height: var(--leading-relaxed); }
.type-caption { font-size: var(--text-sm);  font-weight: 500; color: var(--text-secondary); line-height: var(--leading-normal); }

/* ── Eyebrow label ──────────────────────────────────────────────────────── */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-block-end: var(--sp-3);
}

/* ── Color helpers ──────────────────────────────────────────────────────── */
.text-terracotta { color: var(--color-terracotta); }
.text-stone      { color: var(--color-stone-dark); }
.text-bone       { color: var(--color-bone); }
.text-stone-light { color: var(--color-stone-light); }
.text-center     { text-align: center; }

/* ── Section header (centered intro) ───────────────────────────────────── */
.section-header {
  text-align: center;
  max-width: var(--content-width-ar);
  margin-inline: auto;
  margin-block-end: var(--sp-8);
}
.section-header .type-h2 { margin-block-end: var(--sp-4); }
.section-header .type-body-lg { color: var(--text-secondary); }

/* ── Terracotta divider line ─────────────────────────────────────────────── */
.divider {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-terracotta);
  margin-block: var(--sp-5);
}
.divider--center { margin-inline: auto; }

/* ── LTR wrapper (phone numbers, etc.) ─────────────────────────────────── */
.ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ── Scroll-reveal animation ─────────────────────────────────────────────── */
/* Only: opacity + translateY, 300ms max, ease-out — as per visual-direction.md */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }

/* ── Accessibility ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

/* Skip-to-content link (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: 1rem;
  background: var(--color-terracotta);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 4px 4px;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}