/* ============================================================
   AFLU LAB — BASE
   Resets, typography defaults, focus, scroll
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }

a { color: var(--accent); text-decoration: none; transition: color var(--d-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
}

p { margin: 0; }

/* ---- Focus ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Selection ---- */
::selection {
  background: var(--purple-tint);
  color: var(--ink);
}

/* ---- Numerics for data ---- */
.num, [data-num] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}

/* ---- Containers ---- */
.container        { width: 100%; max-width: var(--container);        margin-inline: auto; padding-inline: var(--s-5); }
.container--narrow{ width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--s-5); }
.container--wide  { width: 100%; max-width: var(--container-wide);   margin-inline: auto; padding-inline: var(--s-5); }

/* ---- Visually-hidden ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}