/* ==========================================================================
   Método Caracol — Layout Base (layout.css)
   Programadores: Graciliano Tolentino; Willian Albarelo
   Método Caracol, marca registrada.
   Data de geração: 2026-01-23
   Padrão: High Tech 12/10 (Ciclo Visual 01)
   Objetivo (P0/P1): aplicar “tema” e tipografia BASE consumindo tokens.css,
   sem invadir componentes (components.css) e sem arquitetar seções (sections.css).

   Contrato:
   - tokens.css é a fonte única de verdade (cores/tipografia/raios/sombras/gaps/container).
   - layout.css aplica base do documento (html/body/a/focus) e utilidades mínimas
     que não são “componentes” nem “grid de seção”.
   ========================================================================== */

/* --------------------------------------------------------------------------
   P0 — Base do documento (aplicação de tokens)
   -------------------------------------------------------------------------- */

html {
  font-size: var(--mc-font-size, 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;

  font-family: var(
    --mc-font-sans,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Ubuntu,
    Cantarell,
    "Noto Sans",
    Arial
  );
  line-height: var(--mc-line-height, 1.55);
  font-weight: var(--mc-font-weight-regular, 400);

  background: var(--mc-bg, #0b0f14);
  color: var(--mc-text, #e7eefc);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Mantém mídia responsiva sem “arquitetar” seções */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   P1 — Tipografia base (apenas elementos semânticos, sem classes)
   - melhora leitura e hierarquia sem “componentizar”
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 10px 0;
  line-height: var(--mc-title-line, 1.06);
  letter-spacing: var(--mc-title-tracking, -0.3px);
  font-weight: var(--mc-font-weight-extrabold, 800);
}

p {
  margin: 0 0 12px 0;
}

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

/* Listas com base consistente (componentes podem sobrescrever) */
ul,
ol {
  margin: 0 0 12px 0;
}

li {
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Links e seleção (identidade, sem criar componentes)
   -------------------------------------------------------------------------- */

a {
  color: var(--mc-link, var(--mc-primary, #2ea8ff));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--mc-link-hover, rgba(46, 168, 255, 0.92));
}

a:active {
  opacity: 0.92;
}

::selection {
  background: rgba(46, 168, 255, 0.22);
  color: var(--mc-text, #e7eefc);
}

/* --------------------------------------------------------------------------
   Acessibilidade — foco global (tokens)
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--mc-focus, rgba(120, 190, 255, 0.8));
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Base estrutural mínima (sem grid/ordenação de seções)
   -------------------------------------------------------------------------- */

main {
  display: block;
}

.page {
  min-height: 100vh;
}

.section {
  display: block;
}

/* --------------------------------------------------------------------------
   Tipos inline úteis (sem “componentizar”)
   -------------------------------------------------------------------------- */

strong,
b {
  font-weight: var(--mc-font-weight-bold, 700);
}

em,
i {
  font-style: italic;
}

code,
kbd,
samp {
  font-family: var(
    --mc-font-mono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace
  );
}

/* Código inline: token-first com fallback */
code {
  background: var(--mc-code-bg, rgba(231, 238, 252, 0.08));
  border: 1px solid var(--mc-code-border, rgba(231, 238, 252, 0.12));
  padding: 2px 6px;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Nota intencional (Caracol 12/10)
   - layout.css NÃO define .btn, .card, grids hero, etc.
   - layout.css NÃO redefine tokens. Só consome.
   -------------------------------------------------------------------------- */