/*
 * Flobega Academy — Base
 * Reset, typography, utilities. Loads after tokens.css.
 */

/* ── Reset (compact, modern, accessible) ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; }
button:disabled { cursor: not-allowed; }
a {
  color: var(--brand-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--brand-800); }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { padding-left: 1.25rem; }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Typography roles ────────────────────────────────────────────── */
.t-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); font-weight: var(--fw-extra);    color: var(--ink-900); letter-spacing: -0.02em; }
.t-display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); font-weight: var(--fw-bold);     color: var(--ink-900); letter-spacing: -0.015em; }
.t-display-md { font-family: var(--font-display); font-size: var(--fs-display-md); line-height: var(--lh-display-md); font-weight: var(--fw-bold);     color: var(--ink-900); letter-spacing: -0.01em; }
.t-display-sm { font-family: var(--font-display); font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); font-weight: var(--fw-bold);     color: var(--ink-900); }
.t-body-lg    { font-size: var(--fs-body-lg);  line-height: var(--lh-body-lg); color: var(--ink-700); }
.t-body       { font-size: var(--fs-body);     line-height: var(--lh-body);    color: var(--ink-700); }
.t-body-sm    { font-size: var(--fs-body-sm);  line-height: var(--lh-body-sm); color: var(--ink-500); }
.t-label      { font-size: var(--fs-body-sm);  line-height: var(--lh-label);   font-weight: var(--fw-semibold); color: var(--ink-700); }
.t-mono-sm    { font-family: var(--font-mono); font-size: var(--fs-mono-sm); line-height: 1.4; font-weight: var(--fw-medium); color: var(--ink-700); }
.t-muted      { color: var(--ink-500); }
.t-locked     { color: var(--ink-300); }

/* ── Layout containers ───────────────────────────────────────────── */
.container       { width: 100%; max-width: var(--maxw-app);  margin-inline: auto; padding-inline: var(--s-4); }
.container-read  { width: 100%; max-width: var(--maxw-read); margin-inline: auto; padding-inline: var(--s-4); }
.container-grid  { width: 100%; max-width: var(--maxw-grid); margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 641px) {
  .container, .container-read, .container-grid { padding-inline: var(--s-6); }
}

/* ── Stack + cluster utilities (small, useful, no framework) ─────── */
.stack > * + * { margin-top: var(--stack-gap, var(--s-4)); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-3)); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.center  { display: flex; align-items: center; justify-content: center; }

/* ── Section banding ─────────────────────────────────────────────── */
.section          { padding-block: var(--s-12); }
.section-tinted   { background: var(--surface-tint); }

/* ── Accessibility helpers ───────────────────────────────────────── */
.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;
}
.skip-link {
  position: absolute; top: -100px; left: var(--s-2);
  background: var(--ink-900); color: white; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); z-index: var(--z-modal);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--s-2); }