/* =========================================================
   BASE.CSS
   Document-level defaults: typography, color, RTL behavior.
   ========================================================= */

html {
  background-color: var(--color-background);

  /* In-page anchors glide instead of jumping. Only one link uses this
     today -- the home hero's "גלו את המערכות שלנו" -> #solutions.
     reset.css already forces scroll-behavior: auto under
     prefers-reduced-motion, so this needs no guard of its own. */
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-align: start; /* RTL-safe: follows document direction */
}

/* English-language content inside the Hebrew document */
[lang="en"],
.english-text {
  font-family: var(--font-english);
  font-weight: var(--font-weight-light);
}

/* ---------------------------------------------------------
   HEADINGS
   Light weight by default; hierarchy comes from size, not
   boldness.
   --------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

/* ---------------------------------------------------------
   PARAGRAPH RHYTHM
   --------------------------------------------------------- */
p {
  max-width: var(--text-max-width);
}

p + p {
  margin-block-start: var(--space-4);
}

/* ---------------------------------------------------------
   LINKS
   Quiet by default; visual treatment stays restrained.
   --------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------
   IMAGES
   --------------------------------------------------------- */
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   FOCUS STATES
   Visible, precise, never suppressed.
   --------------------------------------------------------- */
:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   SELECTION
   --------------------------------------------------------- */
::selection {
  background-color: var(--color-accent-blue);
  color: var(--color-background);
}