/* ============================================================
   MyLu · Tokens — fonte da verdade de cor, tipo, espaço, motion
   Quatro tons e nada mais. Roxo nunca. Metálico nunca. Neon nunca.
   ============================================================ */

:root {
  /* --- Paleta (4 tons) --- */
  --wheat: #B0822E;      /* tinta da casa */
  --gold: #C9A24A;       /* acende no escuro */
  --espresso: #2A2018;   /* profundidade */
  --cream: #F6EFE1;      /* luz / respiro */

  /* --- Tonais derivados --- */
  --wheat-deep: #8C6722;
  --wheat-soft: oklch(0.62 0.085 75);
  --gold-bright: #D9B96A;
  --espresso-80: #3A2E22;
  --espresso-60: #5A4A3A;
  --cream-deep: #EBE0CB;
  --cream-warm: #FBF6EC;

  /* --- Superfícies semânticas (mundo claro) --- */
  --bg: var(--cream);
  --bg-warm: var(--cream-warm);
  --bg-sunken: var(--cream-deep);
  --bg-inverse: var(--espresso);
  --surface-card: var(--cream-warm);

  /* --- Linhas / ornamento --- */
  --line: rgba(42, 32, 24, 0.14);
  --line-strong: rgba(42, 32, 24, 0.26);
  --line-gold: rgba(176, 130, 46, 0.42);

  /* --- Texto semântico --- */
  --ink: var(--espresso);
  --ink-2: rgba(42, 32, 24, 0.74);
  --ink-3: rgba(42, 32, 24, 0.52);
  --ink-gold: var(--wheat);
  --on-dark: var(--cream);
  --on-dark-2: rgba(246, 239, 225, 0.70);
  --on-gold: var(--cream);

  /* --- Tipografia --- */
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* --- Espaço (8pt) --- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* --- Raios --- */
  --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* --- Sombras (quentes, espresso, nunca preto/azul) --- */
  --shadow-xs: 0 1px 2px rgba(42, 32, 24, 0.06);
  --shadow-sm: 0 2px 8px -2px rgba(42, 32, 24, 0.12);
  --shadow-md: 0 10px 28px -10px rgba(42, 32, 24, 0.22);
  --shadow-lg: 0 24px 50px -18px rgba(42, 32, 24, 0.30);
  --shadow-bottle: 0 30px 60px -20px rgba(42, 32, 24, 0.34);
  --glow-gold: 0 0 32px rgba(201, 162, 74, 0.38);

  /* --- Motion --- */
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bloom: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-exit:  cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --dur-quick: 0.22s;
  --dur-calm: 0.5s;
  --dur-bloom: 0.9s;

  /* --- Layout --- */
  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 76px;
}

/* ============================================================
   Reset enxuto
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.8s var(--ease-soft);
}
/* tema escuro (vira na entrada de "Os mais desejados") */
body.is-dark { background-color: var(--espresso); }
img, svg, picture { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:focus-visible {
  outline: 2px solid var(--wheat);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ============================================================
   Tipografia — duas vozes, só duas
   ============================================================ */
.mylu-display {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3rem, 7vw, 6rem); line-height: 0.98; letter-spacing: -0.01em;
}
.mylu-h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1.04; letter-spacing: -0.01em;
}
.mylu-h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1;
}
.mylu-h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.5rem; line-height: 1.2;
}
.mylu-jewel {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  color: var(--ink-gold);
}
.mylu-lead {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.5rem; line-height: 1.5; color: var(--ink-2);
}
.mylu-body {
  font-family: var(--sans); font-weight: 400;
  font-size: 1rem; line-height: 1.65; color: var(--ink-2);
}
.mylu-small {
  font-family: var(--sans); font-weight: 400;
  font-size: 0.82rem; line-height: 1.5; color: var(--ink-3);
}
.mylu-label {
  font-family: var(--sans); font-weight: 500;
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.mylu-eyebrow {
  font-family: var(--sans); font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-gold);
}
.mylu-price {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.25rem; color: var(--ink-gold);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Utilitários de layout
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.u-tnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   Botões
   ============================================================ */
.btn {
  --btn-fill: var(--wheat);
  --btn-ink: var(--on-gold);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6);
  font-family: var(--sans); font-weight: 500; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--btn-ink);
  border-radius: var(--r-md);
  overflow: hidden; isolation: isolate;
  transition: transform var(--dur-quick) var(--ease-soft),
              box-shadow var(--dur-quick) var(--ease-soft);
}
.btn::before { /* fundo */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--btn-fill);
}
.btn::after { /* wipe de baixo pra cima no hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform var(--dur-calm) var(--ease-soft);
}
.btn > span { transition: transform var(--dur-quick) var(--ease-soft); }
.btn:hover::after { transform: translateY(0); }
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:hover > span { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn:active::before { background: var(--wheat-deep); }

.btn--primary-dark { --btn-fill: var(--gold); --btn-ink: var(--espresso); }
.btn--primary-dark::after { background: var(--gold-bright); }

.btn--secondary {
  --btn-ink: var(--ink-gold);
  border: 1px solid var(--line-gold);
}
.btn--secondary::before { background: transparent; }
.btn--secondary::after { background: rgba(176, 130, 46, 0.10); }
.btn--secondary:hover { box-shadow: none; }

.btn--ghost {
  --btn-ink: var(--ink);
  min-height: 44px; padding: 0 var(--s-2);
  flex-direction: column; gap: 3px; white-space: nowrap;
}
.btn--ghost::before, .btn--ghost::after { display: none; }
.btn--ghost .btn-underline {
  display: block; height: 1px; background: var(--wheat);
  width: 0; transition: width var(--dur-calm) var(--ease-soft);
}
.btn--ghost:hover .btn-underline { width: 100%; }

/* ============================================================
   prefers-reduced-motion — a versão estática elegante
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}