/* ════════════════════════════════════════════════════════════════
   base.css — Vanessa Rafaella · Design System (Figma)
   Tokens mobile-first · dark/light · accent #E50914
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Tipografia */
  --font-display: 'Barlow Condensed', Impact, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-accent: 'Fraunces', Georgia, serif;

  --display: var(--font-display);
  --sans: var(--font-body);
  --serif: var(--font-accent);

  /* Marca — Figma */
  --brand-red: #E50914;
  --brand-red-dark: #B20710;
  --brand-red-light: #FF2A36;
  --brand-glow: rgba(229, 9, 20, 0.30);
  --brand-glow-sm: rgba(229, 9, 20, 0.12);

  /* Aliases (compat / evoluir design system) */
  --pink: var(--brand-red);
  --pink-dark: var(--brand-red-dark);
  --pink-light: var(--brand-red-light);
  --pink-glow: var(--brand-glow);
  --pink-glow-sm: var(--brand-glow-sm);
  --fire-red: var(--brand-red);

  /* Plataformas */
  --privacy: #F07206;
  --onlyfans: #1A9FD4;
  --xvideos: #E50914;
  --telegram: #229ED9;
  --whatsapp: #25D366;
  --twitter: #1DA1F2;
  --instagram: #E4405F;

  /* Utilitárias */
  --gold: #F0C040;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;

  /* Animação */
  --duration: 0.3s;
  --dur: 0.3s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --eout: var(--ease-out);

  /* Layout */
  --nav-height: 68px;
  --nav-h: 68px;
  --promo-h: 44px;
  --screen-offset: calc(var(--nav-h) + var(--promo-h));
  --footer-bar-height: 72px;

  /* Privacy section (Figma) */
  --privacy-bg: #f5ede3;
  --privacy-orange: #ff6b00;
  --privacy-orange-soft: #e85d00;
  --privacy-ink: #0a0a0a;
  --privacy-mute: #706860;

  /* Trilho único do site — nav, secções e footer partilham as mesmas margens */
  --site-max: 1200px;
  --container-max: var(--site-max);
  --mx: var(--site-max);
  --container-padding: clamp(1rem, 4vw, 2rem);
  --px: var(--container-padding);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;
}

/* ── Tema escuro (padrão do site / Figma) ── */
[data-theme="dark"] {
  --bg: #080808;
  --bg-soft: #0F0F11;
  --bg-card: #141416;
  --bg-elevated: #1A1A1D;
  --bg-mid: #0C0C0F;

  --border: rgba(255, 255, 255, 0.07);
  --border-hi: rgba(229, 9, 20, 0.28);

  --ink: #ECEAEA;
  --ink-soft: rgba(255, 255, 255, 0.72);
  --ink-mute: rgba(255, 255, 255, 0.45);
  --ink-faint: rgba(255, 255, 255, 0.20);

  --txt: var(--ink);
  --txt-mid: var(--ink-soft);
  --txt-dim: var(--ink-mute);

  --bg-blur: rgba(8, 8, 8, 0.75);
}

/* ── Tema claro ── */
[data-theme="light"] {
  --bg: #F7F5F2;
  --bg-soft: #EFEAE4;
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-mid: #F3EFE9;

  --border: rgba(20, 10, 10, 0.08);
  --border-hi: rgba(229, 9, 20, 0.30);

  --ink: #140A0A;
  --ink-soft: rgba(20, 10, 10, 0.72);
  --ink-mute: rgba(20, 10, 10, 0.45);
  --ink-faint: rgba(20, 10, 10, 0.20);

  --txt: var(--ink);
  --txt-mid: var(--ink-soft);
  --txt-dim: var(--ink-mute);

  --bg-blur: rgba(247, 245, 242, 0.85);
}

/* ── Reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  /* clip evita scroll horizontal sem criar scrollport (sticky continua a funcionar) */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--duration), color var(--duration);
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container,
.site-rail {
  width: min(100%, var(--site-max));
  margin-inline: auto;
  padding-inline: var(--px);
  box-sizing: border-box;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--brand-red);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  z-index: 9999;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

.accent {
  color: var(--brand-red);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}