/* AIDARA Design System — base elements, type scale, utilities.
   Load after tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, video { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }
::selection { background: color-mix(in srgb, var(--signal) 22%, transparent); }

/* ---------- Type scale (use these classes) ---------- */
.display-xl { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.4rem, 1.6rem + 3.2vw, 3.25rem); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
.display-l  { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.4rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.display-m  { font-family: var(--font-serif); font-weight: 500; font-size: 1.75rem; line-height: 1.14; text-wrap: balance; }
.heading    { font-family: var(--font-serif); font-weight: 600; font-size: 1.375rem; line-height: 1.22; }
.subheading { font-family: var(--font-serif); font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.body-l     { font-family: var(--font-sans); font-weight: 400; font-size: 1.125rem; line-height: 1.6; }
.body       { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.6; }
.body-strong{ font-family: var(--font-sans); font-weight: 600; font-size: 1rem; line-height: 1.6; }
.body-s     { font-family: var(--font-sans); font-weight: 400; font-size: 0.875rem; line-height: 1.55; }
.eyebrow    { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.label      { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.04em; }
.data       { font-family: var(--font-mono); font-weight: 500; font-size: 0.875rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.data-lg    { font-family: var(--font-mono); font-weight: 500; font-size: 1.375rem; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* ---------- Utilities ---------- */
.u-muted  { color: var(--muted); }
.u-faint  { color: var(--faint); }
.u-serif  { font-family: var(--font-serif); }
.u-sans   { font-family: var(--font-sans); }
.u-mono   { font-family: var(--font-mono); }
.u-measure { max-width: var(--measure); }
.u-tnum   { font-variant-numeric: tabular-nums; }
.hairline { height: 2px; width: 44px; background: var(--gold); border-radius: 2px; }
.rule     { height: 1px; border: 0; background: var(--line); }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
@media (max-width: 640px) { .container { padding-inline: var(--space-4); } }
.section { padding-block: var(--space-8); }
@media (max-width: 640px) { .section { padding-block: var(--space-7); } }
.stack { display: flex; flex-direction: column; }
.stack-4 { gap: var(--space-4); } .stack-5 { gap: var(--space-5); } .stack-6 { gap: var(--space-6); }
.grid { display: grid; gap: var(--space-5); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* ---------- Bilingual / RTL ---------- */
/*
  Arabic is first-class: the page title font (--font-arabic) must win over every
  type-scale / component rule that sets serif, sans, or mono for Latin.
  Keep Latin product names, codes, and numeric metrics on .latin / mono isolates.
*/
[dir="rtl"],
[dir="rtl"] body {
  font-family: var(--font-arabic);
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .display-xl,
[dir="rtl"] .display-l,
[dir="rtl"] .display-m,
[dir="rtl"] .heading,
[dir="rtl"] .subheading,
[dir="rtl"] .sec-title,
[dir="rtl"] .sec-eyebrow,
[dir="rtl"] .eyebrow,
[dir="rtl"] .label,
[dir="rtl"] .body-l,
[dir="rtl"] .body,
[dir="rtl"] .body-strong,
[dir="rtl"] .body-s,
[dir="rtl"] .u-serif,
[dir="rtl"] .u-sans,
[dir="rtl"] .btn,
[dir="rtl"] .aid-nav__links a,
[dir="rtl"] .trust-chip,
[dir="rtl"] .status,
[dir="rtl"] .product-card__tag,
[dir="rtl"] .product-card__desc,
[dir="rtl"] .stat__label,
[dir="rtl"] .stat__note,
[dir="rtl"] .mkt-head,
[dir="rtl"] .mkt-row__seg {
  font-family: var(--font-arabic);
  letter-spacing: 0;
}
/* Arabic doesn't use Latin-style tracking / all-caps eyebrows */
[dir="rtl"] .eyebrow,
[dir="rtl"] .sec-eyebrow,
[dir="rtl"] .stat__label,
[dir="rtl"] .label,
[dir="rtl"] .mkt-head {
  text-transform: none;
  letter-spacing: 0;
}
/* Arabic display scale ~10–15% smaller at the same point size */
[dir="rtl"] .display-xl { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 2.85rem); }
[dir="rtl"] .display-l  { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.1rem); }
[dir="rtl"] .display-m  { font-size: 1.55rem; }
[dir="rtl"] .sec-title  { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.1rem); }
/* Keep a Latin wordmark, code, or metric intact inside Arabic text */
.bidi-isolate { unicode-bidi: isolate; }
.latin { unicode-bidi: isolate; direction: ltr; font-family: var(--font-sans); }
[dir="rtl"] .latin,
[dir="rtl"] .product-card__name.latin {
  font-family: var(--font-sans);
  unicode-bidi: isolate;
  direction: ltr;
}
[dir="rtl"] .product-card__name:not(.latin) {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  text-transform: none;
}
[dir="rtl"] .stat__value,
[dir="rtl"] .data,
[dir="rtl"] .data-lg,
[dir="rtl"] .data-tag,
[dir="rtl"] .mkt-growth {
  font-family: var(--font-mono);
  unicode-bidi: isolate;
  direction: ltr;
}