/* Sydak Living — base de elementos HTML. Especificidad 0 vía :where()
   para que cualquier componente pueda sobrescribir sin luchar. */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background-color: var(--div-bg);
  color: var(--div-ink);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color var(--dur-slow) var(--ease-out),
    color var(--dur-slow) var(--ease-out);
}

/* ——— Títulos (escala §3.2) ——— */

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ff-display);
  font-weight: 500;
  margin-block: 0 var(--space-4);
}

:where(h1) { font-size: var(--fs-h1); line-height: 1.15; }
:where(h2) { font-size: var(--fs-h2); line-height: 1.2; }
:where(h3) { font-size: var(--fs-h3); line-height: 1.25; }
:where(h4) { font-size: var(--fs-h4); line-height: 1.35; }

:where(h5) {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
}

:where(h6) {
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ls-caps-1);
  text-transform: uppercase;
}

:where(p, ul, ol, blockquote, figure, table) + :where(h2, h3, h4, h5, h6) {
  margin-block-start: var(--space-7);
}

/* ——— Prosa: ritmo y measure ——— */

:where(p, ul, ol, blockquote) {
  margin-block: 0 var(--space-4);
  max-width: var(--container-text);
}

:where(ul, ol) {
  padding-inline-start: var(--space-5);
}

:where(li + li) {
  margin-block-start: var(--space-2);
}

:where(li) > :where(ul, ol) {
  margin-block: var(--space-2) 0;
}

:where(nav) :where(ul, ol) {
  max-width: none;
}

/* ——— Enlaces ——— */

:where(a) {
  color: var(--div-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentcolor 55%, transparent);
  transition:
    color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}

:where(a):hover {
  color: var(--div-ink);
  text-decoration-color: currentcolor;
}

/* ——— Misceláneos editoriales ——— */

:where(hr) {
  margin-block: var(--space-7);
  border: 0;
  border-block-start: 1px solid var(--div-line);
}

:where(blockquote) {
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--div-accent-soft);
  font-style: italic;
  color: var(--div-ink-soft);
}

:where(figure) {
  margin-block: var(--space-6);
}

:where(figcaption) {
  margin-block-start: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--div-ink-soft);
}

:where(small) {
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* EB Garamond no aloja 700: 500 evita el faux-bold del navegador. */
:where(b, strong) {
  font-weight: 500;
}

/* ——— Selección y foco (§2.3, §8) ——— */

::selection {
  background-color: color-mix(in srgb, var(--sl-champagne) 30%, var(--sl-paper));
  color: var(--sl-ink);
}

:focus-visible {
  outline: 2px solid var(--div-focus);
  outline-offset: 3px;
}