/* Fundamentos técnicos e normalização mínima. */

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

html {
  min-width: 320px;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-wrap: anywhere;
  background: var(--color-background);
  color: var(--color-text);
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

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

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--focus-color, var(--color-focus));
  outline-offset: 4px;
}

img { height: auto; }
.container { width: min(calc(100% - 2 * var(--container-gutter)), var(--container-max)); margin-inline: auto; }
.container--wide { --container-max: var(--container-wide); }
.container--narrow { --container-max: var(--container-narrow); }
.container--fluid { width: calc(100% - 2 * var(--container-gutter)); }
.grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); gap: var(--grid-gap); }
.grid > *, .cluster > *, .split > * { min-width: 0; }
.span-4, .span-6, .span-8, .span-12 { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-5)); }
.stack > * { margin-block: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); align-items: center; }
.section-space { padding-block: var(--section-space); }
.content-gap { display: grid; gap: var(--section-content-gap); }
.surface { background: var(--color-white); color: var(--color-text); }
.surface--alt { background: var(--color-background-alt); color: var(--color-text); }
.surface--elevated { border: var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.theme-dark {
  background: var(--color-dark); color: var(--color-on-dark);
  --focus-color: var(--color-focus-dark);
  --color-link: var(--color-focus-dark);
  --color-link-hover: var(--color-white);
  --color-text-muted: var(--color-muted-on-dark);
}
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-link); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset: var(--space-4) auto auto var(--space-4); z-index: 10; transform: translateY(-200%); }
.skip-link:focus { transform: none; }