/* =============================================================================
   base.css — modern reset + base typography + global element styling
   Consumes tokens from tokens.css only. Direction-aware via logical props.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem; /* clear the fixed nav when jumping to #anchors */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-active);
  font-size: 1rem;
  line-height: 1.7;            /* comfortable for Arabic */
  color: var(--text-primary);
  background-color: var(--surface-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* smooth color transition when theme flips */
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

/* Latin reads tighter & a touch lower line-height than Arabic */
.lang-en body,
html[lang="en"] body {
  line-height: 1.6;
  letter-spacing: -0.003em;
}

/* Dark theme depth: a soft top-to-bottom plum gradient + a faint brand glow at
   the top, so the page never reads as a flat dark slab. Scrolls with the body
   (no fixed attachment) to stay cheap on scroll. */
[data-theme="dark"] body {
  /* uniform charcoal with only a whisper of vertical depth — no brand tint */
  background-image: linear-gradient(180deg, #18181f 0%, #141419 55%, #101015 100%);
}

/* ---------- MEDIA / FORM DEFAULTS ---------- */
img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

svg { fill: currentColor; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { cursor: pointer; background: none; border: none; }

ul,
ol { list-style: none; }

/* avoid orphan breaks inside headings/buttons */
h1, h2, h3, h4, h5, h6, button {
  overflow-wrap: break-word;
  text-wrap: balance;
}

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ---------- TYPOGRAPHY SCALE (fluid) ---------- */
h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 700;
  color: var(--text-primary);
}

h1 { font-size: clamp(2.5rem, 1.6rem + 4.5vw, 5rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.6rem); line-height: 1.25; }
h4 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.3; }

/* Latin headings: heavier weight + tighter tracking for the "premium" feel */
.lang-en h1, .lang-en h2, .lang-en h3,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

small { font-size: 0.8125rem; }

strong, b { font-weight: 700; }

/* ---------- LINKS ---------- */
a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--brand-secondary); }

/* ---------- LAYOUT CONTAINER ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ---------- FOCUS VISIBILITY ---------- */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* mouse users don't get the ring (only keyboard) */
:focus:not(:focus-visible) { outline: none; }

/* ---------- SELECTION ---------- */
::selection {
  background-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
  color: var(--text-primary);
}

/* ---------- CUSTOM SCROLLBAR ---------- */
html {
  scrollbar-color: color-mix(in srgb, var(--brand-primary) 55%, transparent) transparent;
  scrollbar-width: thin;
}

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

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand-primary) 50%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--brand-primary) 72%, transparent);
  background-clip: content-box;
}

/* ---------- JS GATING (graceful no-js) ---------- */
.no-js [data-logomark] { min-width: 1em; min-height: 1em; }