/**
 * @file base.css
 * @description Fonts, reset, element typography and layout primitives.
 * Contains no component styling.
 *
 * Depends on: css/tokens.css (must be loaded first).
 * Loaded by: every HTML page, before css/components.css.
 */

/* ---------- Self-hosted fonts (latin subset: covers all 9 site languages) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/eb-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--text-m);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ---------- Typography ---------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-2xl);
}

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

h3 {
  font-size: var(--text-l);
  font-weight: var(--weight-medium);
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

::selection {
  background: var(--ns-cream-warm);
  color: var(--ns-brown);
}

/* ---------- Layout primitives ---------- */
.ns-container {
  width: min(100% - 2 * var(--page-gutter), var(--page-max));
  margin-inline: auto;
}

.ns-stack > * + * {
  margin-block-start: var(--stack-gap, var(--space-4));
}

.ns-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}