/* ==========================================================================
   Global — Raízes di Verona LP
   Consome os tokens de design-tokens.css, color-tokens.css e font-tokens.css.
   Camada única de tipografia: não redefinir h1–h6/p em estilo de seção.
   ========================================================================== */

/* ==========================================================================
   Reset
   ========================================================================== */

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

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

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

/* ==========================================================================
   Base
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--white);
  color: var(--gray-600);
  font-family: var(--p-font-family);
  font-size: var(--p-font-size);
  font-weight: var(--p-font-weight);
  letter-spacing: var(--p-letter-spacing);
  line-height: var(--p-line-height);
  overflow-x: hidden;
}

/* O Fraunces do design usa os eixos SOFT 0 / WONK 1 */
h1,
h2,
h3,
.display-1,
.display-2 {
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* ==========================================================================
   Tipografia — camada única
   ========================================================================== */

.display-1 {
  font-family: var(--display-1-font-family);
  font-size: var(--display-1-font-size);
  font-weight: var(--display-1-font-weight);
  letter-spacing: var(--display-1-letter-spacing);
  line-height: var(--display-1-line-height);
}

.display-2 {
  font-family: var(--display-2-font-family);
  font-size: var(--display-2-font-size);
  font-weight: var(--display-2-font-weight);
  letter-spacing: var(--display-2-letter-spacing);
  line-height: var(--display-2-line-height);
}

h1 {
  font-family: var(--heading-1-font-family);
  font-size: var(--heading-1-font-size);
  font-weight: var(--heading-1-font-weight);
  letter-spacing: var(--heading-1-letter-spacing);
  line-height: var(--heading-1-line-height);
}

h2 {
  font-family: var(--heading-2-font-family);
  font-size: var(--heading-2-font-size);
  font-weight: var(--heading-2-font-weight);
  letter-spacing: var(--heading-2-letter-spacing);
  line-height: var(--heading-2-line-height);
}

p {
  font-family: var(--p-font-family);
  font-size: var(--p-font-size);
  font-weight: var(--p-font-weight);
  letter-spacing: var(--p-letter-spacing);
  line-height: var(--p-line-height);
}

.p-lg {
  font-family: var(--p-lg-font-family);
  font-size: var(--p-lg-font-size);
  font-weight: var(--p-lg-font-weight);
  letter-spacing: var(--p-lg-letter-spacing);
  line-height: var(--p-lg-line-height);
}

.p-sm {
  font-family: var(--p-sm-font-family);
  font-size: var(--p-sm-font-size);
  font-weight: var(--p-sm-font-weight);
  letter-spacing: var(--p-sm-letter-spacing);
  line-height: var(--p-sm-line-height);
}

.p-xs {
  font-family: var(--p-xs-font-family);
  font-size: var(--p-xs-font-size);
  font-weight: var(--p-xs-font-weight);
  letter-spacing: var(--p-xs-letter-spacing);
  line-height: var(--p-xs-line-height);
}

.p-xxs {
  font-family: var(--p-xxs-font-family);
  font-size: var(--p-xxs-font-size);
  font-weight: var(--p-xxs-font-weight);
  letter-spacing: var(--p-xxs-letter-spacing);
  line-height: var(--p-xxs-line-height);
}

.label {
  font-family: var(--label-font-family);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
}

.label-xs {
  font-family: var(--label-xs-font-family);
  font-size: var(--label-xs-font-size);
  font-weight: var(--label-xs-font-weight);
  letter-spacing: var(--label-xs-letter-spacing);
  line-height: var(--label-xs-line-height);
}

/* ==========================================================================
   Links, foco e skip link
   ========================================================================== */

a {
  color: inherit;
}

:focus-visible {
  outline: var(--border-width-md) solid currentColor;
  outline-offset: var(--border-width-md);
}

/* texto que precisa existir para SEO e leitor de tela, mas não aparecer —
   usado no hero, cuja chamada vem rasterizada na arte do handoff */
.visually-hidden {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link {
  background-color: var(--white);
  color: var(--brand-color-primary);
  left: var(--column-grid-sm-padding);
  padding: 12px 16px;
  position: absolute;
  top: -100px;
  z-index: 100;
}

.skip-link:focus-visible {
  top: var(--column-grid-sm-padding);
}

/* ==========================================================================
   Container — grid system do Figma
   ========================================================================== */

.container {
  margin-inline: auto;
  max-width: var(--column-grid-width);
  padding-inline: var(--column-grid-padding);
  width: 100%;
}

/* ==========================================================================
   Movimento — opt-in
   ========================================================================== */

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