/*
 * base.css — Estilos base do Tarivelo
 *
 * Reset minimalista + estilos globais de elementos HTML.
 * Depende de tokens.css (deve ser carregado antes).
 *
 * Filosofia: definir defaults sensatos para todos os elementos,
 * de modo que os templates precisem de mínima customização inline.
 */

/* ─────────────────────────────────────────
 * RESET MINIMALISTA
 * Apenas o necessário — sem zerar tudo que o navegador faz bem.
 * ───────────────────────────────────────── */

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

/* Remove margens padrão dos headings (serão definidas intencionalmente) */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

/* Remove margens padrão dos parágrafos */
p {
  margin: 0;
}

/* Imagens se comportam como bloco por padrão */
img,
picture,
svg {
  display: block;
  max-width: 100%;
}

/* Remove estilo padrão de listas quando usadas como componente de UI */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────
 * BODY — Configuração global
 * Tom geral: sereno, legível, quente.
 * ───────────────────────────────────────── */

body {
  background-color: var(--color-bg);
  color: var(--color-text);

  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);

  /* Antialiasing para texto mais suave — especialmente em Retina/HiDPI */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Evita overflow horizontal acidental */
  overflow-x: hidden;
}

/* ─────────────────────────────────────────
 * HEADINGS
 * Fraunces como fonte de personalidade.
 * Pesos variáveis para hierarquia clara.
 * ───────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: var(--leading-tight);
  color: var(--color-text);

  /* Ligatures e features tipográficas do Fraunces */
  font-feature-settings: "ss01" on, "liga" on;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-md);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-sm);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
}

/* ─────────────────────────────────────────
 * PARÁGRAFOS
 * ───────────────────────────────────────── */

p {
  margin-bottom: var(--space-md);
  max-width: 65ch; /* largura máxima confortável para leitura */
}

p:last-child {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────
 * LINKS
 * Cor primária escura — discretos, sem sublinhado até hover.
 * ───────────────────────────────────────── */

a {
  color: var(--color-primary-700);
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-500);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-300);
  text-underline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────
 * CONTAINER PRINCIPAL
 * Coluna central com largura confortável — não ocupa a tela toda.
 * Espaçamento generoso por design.
 * ───────────────────────────────────────── */

.container-tarivelo {
  max-width: var(--container-max-width);
  margin-inline: auto; /* centraliza horizontalmente */
  padding-inline: var(--container-padding-x);
  padding-block: var(--container-padding-y);
}

/* ─────────────────────────────────────────
 * SCROLL SUAVE
 * ───────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* ─────────────────────────────────────────
 * UTILITÁRIOS GLOBAIS MÍNIMOS
 * Apenas o que não cabe em components.css por ser elementar.
 * ───────────────────────────────────────── */

/* Texto visualmente oculto mas acessível a leitores de tela */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────
 * SCROLLBAR DISCRETA
 * Reduz a presença visual da barra de rolagem sem escondê-la.
 * Firefox: scrollbar-width. WebKit: seletores ::-webkit-scrollbar.
 * ───────────────────────────────────────── */

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 154, 150, 0.25) transparent;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(154, 154, 150, 0.2);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(154, 154, 150, 0.4);
}