/* =============================================================================
   olander · Foundations
   Tipografia aplicada, containers, grid do shell, utilitários mínimos.
   ========================================================================== */

/* ---- Fonte self-hosted (Fase 111) --------------------------------------- */
/* Onest variável (100–900), subsets do Fontsource. O navegador só baixa o
   subset cujo unicode-range aparece na página. */
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/onest-cyrillic-ext-wght-normal-4818fca9.woff2") format("woff2-variations");
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/onest-cyrillic-wght-normal-c98144ff.woff2") format("woff2-variations");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/onest-latin-ext-wght-normal-44721fb9.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/onest-latin-wght-normal-9debe597.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- Tipografia -------------------------------------------------------- */
/* Fase 128 — Onest (--font-display) nos títulos de todo o app, não só
   páginas públicas/bento (antes: só aqui nunca era aplicada). Corpo de post/
   composer/notificação continua em --font-sans — leitura densa, decisão do
   backlog (ads-manager-backlog.md §3) preservada. */
.ds-display  { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold);
               line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
               color: var(--color-text-strong); }
.ds-title-1  { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold);
               line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
               color: var(--color-text-strong); }
.ds-title-2  { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold);
               line-height: var(--leading-snug); color: var(--color-text-strong); }
.ds-title-3  { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold);
               line-height: var(--leading-snug); color: var(--color-text-strong); }
.ds-body     { font-size: var(--text-lg); line-height: var(--leading-normal); }
.ds-text     { font-size: var(--text-base); line-height: var(--leading-normal); }
.ds-meta     { font-size: var(--text-sm); line-height: var(--leading-snug);
               color: var(--color-text-secondary); }
.ds-label    { font-size: var(--text-xs); font-weight: var(--weight-semibold);
               letter-spacing: 0.02em; text-transform: uppercase;
               color: var(--color-text-muted); }
.ds-numeric  { font-variant-numeric: tabular-nums; }

.ds-text-secondary { color: var(--color-text-secondary); }
.ds-text-muted     { color: var(--color-text-muted); }
.ds-text-accent    { color: var(--color-primary); }

/* ---- Container -------------------------------------------------------- */
.ds-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.ds-container--narrow { max-width: var(--container-narrow); }

/* ---- Stack (fluxo vertical com gap consistente) ---------------------- */
.ds-stack        { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-stack--sm    { gap: var(--space-2); }
.ds-stack--lg    { gap: var(--space-6); }
.ds-cluster      { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ---- Divisores ------------------------------------------------------ */
.ds-divider  { border: 0; border-top: var(--divider); }

/* ---- Utilitários ------------------------------------------------------- */
.ds-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-line-clamp-2 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Link "pular para o conteúdo" */
.ds-skip-link {
  position: absolute; left: var(--space-3); top: -100px;
  background: var(--color-surface); color: var(--color-primary);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); z-index: var(--z-toast);
}
.ds-skip-link:focus-visible { top: var(--space-3); }