:root {
  /* ==========================================
     XisPay — Preto grafite + Amarelo neon
     ========================================== */

  /* Base neutra — preto / grafite */
  --xp-black: #0b0d12;
  --xp-charcoal: #111418;
  --xp-slate: #161a24;
  --xp-slate-soft: #1d2331;
  --xp-ink: #3a3f4d;

  /* Acento — amarelo neon */
  --xp-yellow: #f0f53c;
  --xp-yellow-soft: #dde030;
  --xp-yellow-bright: #f7fa79;
  --xp-yellow-ink: #a5a91d;

  /* Neutros claros */
  --xp-white: #ffffff;
  --xp-mist: #f5f6f9;
  --xp-fog: #e8eaf1;
  --xp-cloud: #cfd2dc;

  /* Retrocompat: mantém nomes antigos apontando para a nova paleta */
  --green-forest: var(--xp-charcoal);
  --green-bright: var(--xp-yellow);
  --green-mid: var(--xp-yellow-soft);
  --yellow-gold: var(--xp-yellow);
  --yellow-light: var(--xp-yellow-bright);

  --navy: var(--xp-black);
  --navy-mid: var(--xp-charcoal);
  --navy-soft: var(--xp-slate);

  --accent-blue: var(--xp-yellow);
  --accent-green: var(--xp-yellow-soft);
  --accent-gold: var(--xp-yellow);
  --accent-gold-dark: var(--xp-yellow-ink);
  --accent-highlight: var(--xp-yellow-bright);

  /* Superfícies */
  --white-color: #ffffff;
  --white-background: #ffffff;
  --surface-muted: var(--xp-mist);
  --surface-alt: var(--xp-fog);
  --paragraph-color: #4a4f5c;

  /* Marca — CTAs e destaques */
  --primary-color: var(--xp-yellow);
  --primary-text: var(--xp-black);
  --btn-color: var(--xp-yellow);
  --btn-hover: var(--xp-yellow-soft);
  --btn-text-on-primary: var(--xp-black);

  /* Hero / slideshow — overlay preto com leve brilho amarelo */
  --background-color: var(--xp-black);
  --background-linear-color: linear-gradient(
    125deg,
    rgba(11, 13, 18, 0.94) 0%,
    rgba(17, 20, 24, 0.88) 45%,
    rgba(240, 245, 60, 0.18) 100%
  );
  --background-overlay: linear-gradient(
    120deg,
    rgba(11, 13, 18, 0.88) 0%,
    rgba(17, 20, 24, 0.55) 55%,
    transparent 100%
  );

  /* Seções */
  --background-gallery: linear-gradient(
    165deg,
    var(--xp-black) 0%,
    var(--xp-charcoal) 50%,
    #070910 100%
  );
  --background-contact: linear-gradient(
    165deg,
    var(--surface-muted) 0%,
    var(--white-background) 55%,
    var(--surface-alt) 100%
  );
  --background-second: var(--surface-muted);

  /* Gradientes de acento — somente amarelo */
  --gradient-brand: linear-gradient(
    135deg,
    var(--xp-yellow-bright) 0%,
    var(--xp-yellow) 60%,
    var(--xp-yellow-soft) 100%
  );
  --gradient-brand-soft: linear-gradient(
    90deg,
    rgba(240, 245, 60, 0.18) 0%,
    rgba(240, 245, 60, 0.06) 100%
  );

  /* Navegação (claro) */
  --menu-header-color: rgba(255, 255, 255, 0.98);
  --menu-header-text: var(--xp-black);

  /* Elevação e forma */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(11, 13, 18, 0.08);
  --shadow-md: 0 8px 28px rgba(11, 13, 18, 0.14);
  --shadow-glow-gold: 0 4px 24px rgba(240, 245, 60, 0.38);
  --shadow-lg: 0 20px 50px rgba(11, 13, 18, 0.18);
  --shadow-inner-vignette: inset 0 0 120px rgba(11, 13, 18, 0.5);
  --border-hairline: 1px solid rgba(11, 13, 18, 0.08);
  --border-accent-soft: 1px solid rgba(240, 245, 60, 0.28);

  --section-py: clamp(3.5rem, 6vw, 5.5rem);
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Animações — curvas e durações unificadas */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-nav: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hero: cubic-bezier(0.2, 0.85, 0.35, 1);
  --dur-reveal: 0.88s;
  --dur-hero: 0.92s;
  --dur-nav: 1s;

  --text-primary: var(--xp-black);

  /* Topbar (claro) */
  --nav-surface: rgba(255, 255, 255, 0.96);
  --nav-border: rgba(11, 13, 18, 0.08);
  --nav-link: rgba(11, 13, 18, 0.78);
  --nav-link-hover-bg: rgba(240, 245, 60, 0.16);
  --nav-link-hover-text: var(--xp-black);
  --nav-shadow: 0 4px 24px rgba(11, 13, 18, 0.08);

  /* #menu fixo — piso generoso para o hero não colar na barra */
  --nav-fixed-floor: clamp(12.5rem, 10.5rem + 4.5vw, 17rem);
  --nav-fixed-offset: var(--nav-fixed-floor);
}

/* Tema escuro — preto profundo + amarelo */
html[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] {
  --text-primary: #f4f5f8;
  --paragraph-color: #b7bac5;

  --white-background: #0f131a;
  --surface-muted: #0b0d12;
  --surface-alt: #141820;

  --menu-header-text: #f4f5f8;

  --background-contact: linear-gradient(
    165deg,
    #0b0d12 0%,
    #0f131a 52%,
    #070910 100%
  );
  --background-second: var(--surface-alt);

  --border-hairline: 1px solid rgba(255, 255, 255, 0.08);
  --border-accent-soft: 1px solid rgba(240, 245, 60, 0.32);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.6);
  --shadow-glow-gold: 0 4px 24px rgba(240, 245, 60, 0.35);

  --gradient-brand-soft: linear-gradient(
    90deg,
    rgba(240, 245, 60, 0.22) 0%,
    rgba(240, 245, 60, 0.05) 100%
  );

  --nav-surface: rgba(11, 13, 18, 0.92);
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-link: rgba(244, 245, 248, 0.85);
  --nav-link-hover-bg: rgba(240, 245, 60, 0.16);
  --nav-link-hover-text: var(--xp-yellow-bright);
  --nav-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
}

/* =========================
   Animações globais
   ========================= */
@keyframes revealUpFade {
  from {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealFromLeft {
  from {
    opacity: 0;
    transform: translate3d(-52px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealFromRight {
  from {
    opacity: 0;
    transform: translate3d(52px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroSlideInRight {
  from {
    opacity: 0;
    transform: translate3d(72px, 36px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroSlideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-56px, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}