/* ═══════════════════════════════════════════════════════════════════
   LIVIA NATURALS — base.css
   CSS Reset, element defaults, typography rules, scrollbar, selection.
   Depends on: tokens.css (must load first)
   TidyFactor Design Engine v1.4 · Zero per-page CSS
   ═══════════════════════════════════════════════════════════════════ */

/* Pre-emit critique: P5 H5 E5 S5 R5 V5 */

/* ─── 1. RESET ─────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body-en);
  font-size: var(--text-base);
  color: var(--livia-ink);
  background-color: var(--livia-pearl);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* RTL body */
body[dir="rtl"],
body.rtl {
  font-family: var(--font-body-ar);
  direction: rtl;
}

img, video {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

video {
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  line-height: inherit;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

svg {
  display: block;
  flex-shrink: 0;
}

/* ─── 2. TYPOGRAPHY DEFAULTS ──────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display-en);
  font-weight: 400;
  line-height: 1.1;
  color: var(--livia-ink);
  letter-spacing: -0.01em;
}

body[dir="rtl"] h1,
body[dir="rtl"] h2,
body[dir="rtl"] h3,
body[dir="rtl"] h4,
body[dir="rtl"] h5,
body[dir="rtl"] h6 {
  font-family: var(--font-display-ar);
  letter-spacing: 0;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p {
  max-width: 68ch;
  color: var(--livia-ink-soft);
  line-height: 1.75;
}

strong { font-weight: 600; color: var(--livia-ink); }
em { font-style: italic; }

/* ─── 3. EYEBROW / LABEL TYPOGRAPHY ──────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--livia-gold);
}

.eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--livia-gold);
  flex-shrink: 0;
}

body[dir="rtl"] .eyebrow {
  flex-direction: row-reverse;
  font-family: var(--font-ui);
  letter-spacing: 0;
}

body[dir="rtl"] .eyebrow::before {
  margin-inline-start: 0;
}

/* Display headline utility */
.headline-display {
  font-family: var(--font-display-en);
  font-size: var(--text-4xl);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  color: var(--livia-ink);
}

body[dir="rtl"] .headline-display {
  font-family: var(--font-display-ar);
  font-style: normal;
  font-weight: 500;
}

.headline-section {
  font-family: var(--font-display-en);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.1;
}

body[dir="rtl"] .headline-section {
  font-family: var(--font-display-ar);
  font-weight: 600;
}

.lede {
  font-size: var(--text-md);
  color: var(--livia-ink-soft);
  line-height: 1.75;
  max-width: 52ch;
}

/* ─── 4. SELECTION ────────────────────────────────────────────────── */

::selection {
  background: var(--livia-magenta-light);
  color: var(--livia-magenta-dark);
}

/* ─── 5. SCROLLBAR ────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--livia-pearl);
}

::-webkit-scrollbar-thumb {
  background: var(--livia-lilac-soft);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--livia-lilac);
}

/* ─── 6. FOCUS VISIBLE ────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--livia-magenta);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ─── 7. REDUCED MOTION ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 8. SECTION BASE ─────────────────────────────────────────────── */

section {
  position: relative;
  overflow: hidden;
}

/* ─── 9. SMOOTH SCROLL ANCHOR OFFSET (nav height) ────────────────── */

[id] {
  scroll-margin-top: 80px;
}


/* ═══════════════════════════════════════════════════════════════════
   i18n BASELINE — ISOLATION & UNICODE RULES
   Per brand.json localization — latinBrandNamesUnmirrored, numeralsStayLTR
   ═══════════════════════════════════════════════════════════════════ */

/*
 * 1. Latin brand names are IDENTITY TOKENS.
 *    They NEVER flip, translate, or mirror in RTL context.
 *    Set direction: ltr + unicode-bidi: isolate so they render
 *    left-to-right inside a right-to-left document.
 */
.nav-wordmark,
.loader-wordmark {
  unicode-bidi: isolate;
}

html[dir="rtl"] .nav-wordmark,
html[dir="rtl"] .loader-wordmark {
  direction: ltr;
  display: inline-block; /* required for direction to take effect on inline elements */
}

/*
 * 2. Numerals stay LTR inside RTL flow.
 *    Stat counters, prices, measurements — always rendered LTR.
 *    unicode-bidi: isolate creates an isolated bidirectional context.
 */
html[dir="rtl"] .stat-number,
html[dir="rtl"] [data-count] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/*
 * 3. <bdi> default — bidirectional isolation element.
 *    Use <bdi> around any user-generated or variable text inside
 *    an opposite-direction flow (e.g. product codes, phone numbers).
 */
bdi {
  unicode-bidi: isolate;
}

/*
 * 4. Master RTL Typography Engine
 *    Arabic typography rules (per AGENTS.md & brand.json):
 *    - Headings: El Messiri (var(--font-heading-ar)) — NEVER italic, NEVER Amiri, letter-spacing: 0
 *    - Body & UI: Tajawal (var(--font-body-ar)) — clean leading, letter-spacing: 0
 *    - Brand identity tokens: LIVIA Naturals / Anagenix / Dermagenix stay LTR
 */

/* ── Arabic Headings Master Enforcement ───────────────────────── */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .headline-display,
html[dir="rtl"] .headline-section,
html[dir="rtl"] .hero-headline,
html[dir="rtl"] .product-hero-name,
html[dir="rtl"] .section-header h2,
html[dir="rtl"] .pillar-card h3,
html[dir="rtl"] .product-card-name,
html[dir="rtl"] .ingredient-name,
html[dir="rtl"] .ingredient-deep-name,
html[dir="rtl"] .modal-step h3,
html[dir="rtl"] .founder-quote,
html[dir="rtl"] .testimonial-quote,
html[dir="rtl"] .modal-recommendation-title {
  font-family: var(--font-heading-ar) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

/* ── Arabic Body & UI Master Enforcement ──────────────────────── */
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] a,
html[dir="rtl"] span,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] .btn,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .lede,
html[dir="rtl"] .hero-sub,
html[dir="rtl"] .product-hero-tagline,
html[dir="rtl"] .product-hero-desc,
html[dir="rtl"] .nav-links a,
html[dir="rtl"] .nav-cta,
html[dir="rtl"] .stat-label,
html[dir="rtl"] .wa-text,
html[dir="rtl"] .wa-sticky-product-name,
html[dir="rtl"] .wa-sticky-sub,
html[dir="rtl"] .wa-sticky-cta,
html[dir="rtl"] .footer-links a,
html[dir="rtl"] .footer-col-title,
html[dir="rtl"] .footer-copy,
html[dir="rtl"] .modal-option,
html[dir="rtl"] .modal-step-label,
html[dir="rtl"] .ingredient-chip,
html[dir="rtl"] .product-claim-chip,
html[dir="rtl"] .testimonial-author-name,
html[dir="rtl"] .testimonial-author-title,
html[dir="rtl"] .testimonial-badge,
html[dir="rtl"] .trust-text,
html[dir="rtl"] .step-content p,
html[dir="rtl"] .step-content h4 {
  font-family: var(--font-body-ar) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

html[dir="rtl"] p {
  line-height: 1.85 !important; /* Tajawal needs generous leading */
}

/*
 * 5. Logical properties validation.
 *    Any margin/padding NOT using logical properties (margin-inline-*,
 *    padding-inline-*) will NOT flip in RTL. This comment is intentional
 *    documentation — all future additions MUST use logical properties.
 */