/* Base: temas, tipografia, utilitários. Valores de marca vêm de tokens.css. */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-theme: 700ms;
  --nav-h: 64px;
  --gutter: var(--spacing-gutter);
  --shadow-float: 0 1px 1px rgb(0 0 0 / .08), 0 18px 48px -12px rgb(0 0 0 / .42);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--color-noite);
  --bg-2: var(--color-noite-2);
  --fg: var(--color-linho);
  --fg-soft: rgb(243 238 231 / .72);
  --line: rgb(243 238 231 / .16);
  --line-strong: rgb(243 238 231 / .4);
  --glass: rgb(37 34 33 / .52);
  --glass-strong: rgb(30 28 27 / .88);
  --veil-side: rgb(22 20 19 / .78);
  --btn-bg: var(--color-linho);
  --btn-fg: var(--color-grafite);
  --glow: rgb(168 122 94 / .38);
  --mod-fg: var(--color-logo-claro);
  --media-bg: #34302d;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--color-linho);
  --bg-2: var(--color-linho-2);
  --fg: var(--color-grafite);
  --fg-soft: rgb(44 44 44 / .74);
  --line: rgb(44 44 44 / .14);
  --line-strong: rgb(44 44 44 / .4);
  --glass: rgb(243 238 231 / .6);
  --glass-strong: rgb(248 245 240 / .9);
  --veil-side: rgb(243 238 231 / .82);
  --btn-bg: var(--color-grafite);
  --btn-fg: var(--color-linho);
  --glow: rgb(206 192 179 / .75);
  --mod-fg: var(--color-grafite);
  --media-bg: var(--color-areia);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; hyphens: none; overflow-wrap: normal; word-break: normal; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body-md), system-ui, sans-serif;
  font-size: var(--text-body-md);
  font-weight: var(--font-weight-body-md);
  line-height: var(--leading-body-md);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t-theme) var(--ease-io), color var(--t-theme) var(--ease-io);
}

/* grão sutil sobre a página */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
::selection { background: var(--color-areia); color: var(--color-grafite); }

.wrap { width: 100%; max-width: calc(var(--spacing-content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 900px) { :root { --gutter: var(--spacing-gutter-desktop); } }

/* ===== Tipografia ===== */
.t-display, .t-headline, .t-title { font-family: var(--font-display), Georgia, serif; }
.t-display {
  font-size: clamp(var(--text-display-mobile), 7.4vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-display);
}
.t-headline {
  font-size: clamp(var(--text-headline-mobile), 5vw, var(--text-headline));
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-headline);
  font-weight: var(--font-weight-headline);
}
.t-title { font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--font-weight-title); }
.t-display em, .t-headline em, .t-title em { font-style: italic; }
.t-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); font-weight: var(--font-weight-body-lg); }
.t-body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-body-sm); }
.t-label {
  font-family: var(--font-label-caps), system-ui, sans-serif;
  font-size: var(--text-label-caps);
  line-height: var(--leading-label-caps);
  letter-spacing: var(--tracking-label-caps);
  font-weight: var(--font-weight-label-caps);
  text-transform: uppercase;
}
.t-price {
  font-size: var(--text-price);
  line-height: var(--leading-price);
  letter-spacing: var(--tracking-price);
  font-weight: var(--font-weight-price);
  font-variant-numeric: tabular-nums;
}
.soft { color: var(--fg-soft); }
.measure { max-width: var(--spacing-text-max); }

/* linhas com máscara para a entrada dos títulos */
.line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line > span { display: inline-block; }

/* ===== Botões e links ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: 52px;
  padding-inline: 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), border-color 300ms var(--ease-out), translate 300ms var(--ease-out);
}
.btn--solid { background: var(--btn-bg); color: var(--btn-fg); }
.btn--solid:hover { translate: 0 -2px; }
.btn--ghost { border-color: var(--line); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--block { width: 100%; }
.btn svg, .link-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: translate 300ms var(--ease-out); }
.btn:hover svg, .link-arrow:hover svg { translate: 4px 0; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 100% 1px no-repeat;
  transition: background-size 400ms var(--ease-out);
}
.link-arrow:hover { background-size: 0 1px; background-position-x: 100%; }

.text-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.skip-link { position: absolute; left: 16px; top: -80px; z-index: 200; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); }
.skip-link:focus { top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}