/* ==========================================================================
   OMNIAN  ·  BASE
   ==========================================================================
   Reset moderno + tipografia editorial.
   Tudo que vem antes de qualquer componente.
   ========================================================================== */

/* ----- Reset moderno (mais conservador que o reset clássico) ----------- */

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

* {
  margin: 0;
  padding: 0;
}

html {
  /* Tipografia base 16px — toda escala depende disso */
  font-size: 100%;
  /* Suaviza fontes em dark mode */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Scroll suave dentro da página, mas só em links âncora */
  scroll-behavior: smooth;
  /* Evita ajuste automático de tamanho no iOS */
  -webkit-text-size-adjust: 100%;
  /* Reserva espaço pra scrollbar pra evitar layout shift */
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--omn-font-editorial);
  font-size: var(--omn-text-body);
  font-weight: var(--omn-weight-regular);
  line-height: var(--omn-lh-relaxed);
  color: var(--omn-fg);
  background: var(--omn-bg);
  /* Sem overflow horizontal, ever */
  overflow-x: hidden;
  /* Min-height pra footer ficar embaixo em páginas curtas */
  min-height: 100vh;
  min-height: 100svh;
  /* Transição entre temas — não afeta primeira pintura */
  transition: background-color var(--omn-dur) var(--omn-ease),
              color var(--omn-dur) var(--omn-ease);
}

/* ----- Texto e prosa --------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--omn-font-editorial);
  font-weight: var(--omn-weight-regular);
  line-height: var(--omn-lh-tight);
  letter-spacing: var(--omn-tracking-tight);
  color: var(--omn-fg);
  /* text-wrap: balance — quebra linhas pra ficar visualmente equilibrado */
  text-wrap: balance;
}

h1 { font-size: var(--omn-text-h1); }
h2 { font-size: var(--omn-text-h2); }
h3 { font-size: var(--omn-text-h3); line-height: var(--omn-lh-snug); }
h4, h5, h6 { font-size: var(--omn-text-lead); line-height: var(--omn-lh-snug); }

p {
  /* Prosa quebra com pretty (CSS Text 4) — fallback automático */
  text-wrap: pretty;
  /* Hifenização sutil em prosa longa */
  hyphens: auto;
}

/* Itálico fica oliva — é a "ênfase com voz" */
em, i {
  color: var(--omn-accent);
  font-style: italic;
}

/* Strong é peso 500, nunca 700 (regra do brand book) */
strong, b {
  font-weight: var(--omn-weight-medium);
}

/* Smcaps editorial pra eyebrows (números de capítulo, datas) */
.omn-eyebrow {
  font-family: var(--omn-font-system);
  font-size: var(--omn-text-meta);
  font-weight: var(--omn-weight-medium);
  letter-spacing: var(--omn-tracking-caps);
  text-transform: uppercase;
  color: var(--omn-fg-meta);
  line-height: var(--omn-lh-normal);
}

/* Lead paragraph — primeiro parágrafo após heading */
.omn-lead {
  font-size: var(--omn-text-lead);
  line-height: var(--omn-lh-snug);
  color: var(--omn-fg);
  max-width: var(--omn-measure-wide);
}

/* ----- Links ----------------------------------------------------------- */

a {
  color: var(--omn-accent);
  text-decoration: none;
  /* Underline custom: fina, com offset, pra parecer editorial */
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: color var(--omn-dur-fast) var(--omn-ease),
              background-size var(--omn-dur) var(--omn-ease);
}

a:hover {
  color: var(--omn-olive-deep);
  background-size: 0 1px;
}

[data-theme="dark"] a:hover,
@media (prefers-color-scheme: dark) {
  a:hover { color: var(--omn-bone); }
}

/* Links sem underline — usar com .omn-link-bare */
.omn-link-bare {
  background-image: none;
  padding-bottom: 0;
}

/* ----- Imagens e mídia ------------------------------------------------- */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* SVGs herdam currentColor por padrão — controle pelo container */
svg {
  fill: currentColor;
}

/* ----- Forms (reset mínimo) ------------------------------------------- */

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

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* ----- Listas ---------------------------------------------------------- */

ul, ol {
  /* Listas só recebem padding quando dentro de prose */
  list-style: none;
}

.omn-prose ul,
.omn-prose ol {
  list-style: revert;
  padding-left: var(--omn-space-5);
}

.omn-prose ul li,
.omn-prose ol li {
  margin-block: var(--omn-space-2);
}

.omn-prose ul li::marker {
  color: var(--omn-fg-meta);
}

/* ----- Citações (blockquote editorial) -------------------------------- */

blockquote {
  font-family: var(--omn-font-editorial);
  font-style: italic;
  font-size: var(--omn-text-lead);
  line-height: var(--omn-lh-snug);
  color: var(--omn-fg);
  max-width: var(--omn-measure-narrow);
  padding-left: var(--omn-space-5);
  border-left: var(--omn-border-accent) solid var(--omn-accent);
  margin-block: var(--omn-space-6);
}

blockquote cite {
  display: block;
  font-style: normal;
  font-size: var(--omn-text-small);
  color: var(--omn-fg-meta);
  margin-top: var(--omn-space-3);
  font-family: var(--omn-font-system);
  letter-spacing: var(--omn-tracking-wide);
}

cite::before { content: "— "; }

/* ----- Código inline e bloco ------------------------------------------ */

code, kbd, samp, pre {
  font-family: var(--omn-font-mono);
  font-size: 0.9em;
}

code {
  padding: 0.125em 0.375em;
  background: var(--omn-bg-alt);
  border-radius: var(--omn-radius-sm);
  color: var(--omn-fg);
}

pre {
  background: var(--omn-bg-alt);
  border: var(--omn-border-thin) solid var(--omn-border);
  border-radius: var(--omn-radius);
  padding: var(--omn-space-4);
  overflow-x: auto;
  line-height: var(--omn-lh-normal);
}

pre code {
  padding: 0;
  background: none;
}

/* ----- HR — divisor editorial ----------------------------------------- */

hr {
  border: none;
  height: var(--omn-border-thin);
  background: var(--omn-border);
  margin-block: var(--omn-space-7);
}

/* HR com asterisco central — divisor editorial nobre */
.omn-hr-mark {
  height: auto;
  background: none;
  text-align: center;
  position: relative;
  margin-block: var(--omn-space-8);
}

.omn-hr-mark::before {
  content: "·  ·  ·";
  font-family: var(--omn-font-editorial);
  color: var(--omn-fg-meta);
  letter-spacing: 0.5em;
  font-size: var(--omn-text-lead);
}

/* ----- Foco visível (acessibilidade) ----------------------------------- */

:focus-visible {
  outline: var(--omn-border-accent) solid var(--omn-accent);
  outline-offset: 3px;
  border-radius: var(--omn-radius-sm);
}

/* ----- Seleção -------------------------------------------------------- */

::selection {
  background: var(--omn-olive);
  color: var(--omn-paper);
}

/* ----- Scrollbar customizada (sutil, oliva) --------------------------- */

@supports (scrollbar-width: thin) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--omn-olive) transparent;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--omn-border);
  border-radius: var(--omn-radius);
  border: 2px solid var(--omn-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--omn-olive);
}

/* ----- Utilitários atômicos (poucos, intencionais) -------------------- */

.omn-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;
}

.omn-container {
  width: 100%;
  max-width: var(--omn-container-max);
  margin-inline: auto;
  padding-inline: var(--omn-container-pad-x);
}

.omn-section {
  padding-block: var(--omn-section-pad-y);
}

.omn-text-meta {
  font-family: var(--omn-font-system);
  font-size: var(--omn-text-meta);
  letter-spacing: var(--omn-tracking-caps);
  text-transform: uppercase;
  color: var(--omn-fg-meta);
}

.omn-measure       { max-width: var(--omn-measure); }
.omn-measure-narrow { max-width: var(--omn-measure-narrow); }
.omn-measure-wide  { max-width: var(--omn-measure-wide); }