/* Pro Beauty Gear — tokens em CSS. Tema claro é o padrão; escuro com <html data-theme="dark">. */
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  --red: #fb222b;
  --red-hover: #d9141d;
  --red-deep: #740508;
  --on-red: #ffffff;
  --rating: var(--red);
  --stage: #000000;
  --stage-raised: #0a0a0a;
  --stage-line: #313131;
  --stage-outline: #a9a9a9;
  --on-stage: #ffffff;
  --on-stage-soft: #e6e6e6;
  --on-stage-muted: #b0b0b0;
  --silver: #d9d8d9;
  --steel: #8e8e8d;
  --surface: #ffffff;
  --surface-sunken: #f2f2f2;
  --line: #ececec;
  --ink: #0a0a0a;
  --ink-muted: #56606e;
  --ink-fill: #0a0a0a;
  --on-ink-fill: #ffffff;
  --glow-red: 0 0 0 1px #fb222b, 0 0 18px #fb222b73, inset 0 0 10px #fb222b2e;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #fb222b;
  --focus-ring-stage: 0 0 0 2px #000000, 0 0 0 4px #fb222b;
}

[data-theme="dark"] {
  --surface: #0e0e0f;
  --surface-sunken: #1a1a1b;
  --line: #2a2a2c;
  --ink: #f5f5f5;
  --ink-muted: #a3abb6;
  --ink-fill: #f5f5f5;
  --on-ink-fill: #0a0a0a;
  --focus-ring: 0 0 0 2px #0e0e0f, 0 0 0 4px #fb222b;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 64px;
  --space-9: 80px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --container: 1280px;
  --control-lg: 56px;
  --control-md: 40px;
  --announcement-height: 40px;
  --header-height: 88px;
  --feature-strip-height: 112px;
  --tile-label-height: 52px;
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

/* Estilos de texto */
.display-xl { font-family: var(--font-sans); font-size: 76px; line-height: 70px; font-weight: 800; letter-spacing: -0.01em; }
.display-lg { font-family: var(--font-sans); font-size: 48px; line-height: 48px; font-weight: 800; letter-spacing: -0.005em; }
.display-md { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 800; }
.eyebrow { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.28em; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }
.button { font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 600; }
.nav { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; }
.feature-title { font-family: var(--font-sans); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 0.06em; }
.product-name { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.price { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 700; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.announcement { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; }
.social-statement { font-family: var(--font-sans); font-size: 72px; line-height: 76px; font-weight: 300; letter-spacing: 0.01em; }
.social-statement-strong { font-family: var(--font-sans); font-size: 88px; line-height: 88px; font-weight: 800; }
.social-spaced { font-family: var(--font-sans); font-size: 40px; line-height: 48px; font-weight: 300; letter-spacing: 0.3em; }
.social-body { font-family: var(--font-sans); font-size: 24px; line-height: 36px; font-weight: 400; letter-spacing: 0.1em; }
.social-label { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 500; letter-spacing: 0.3em; }