/* ============================================================
   BellarX — Design Tokens
   Paleta: preto absoluto + branco puro, com cinzas premium
   Inspiração: Apple HIG / monocromático editorial
   ============================================================ */

:root {
  /* Marca — escala monocromática (preto absoluto → branco puro) */
  --bx-black: #000000;
  --bx-ink: #0a0a0a;
  --bx-ink-soft: #1a1a1a;
  --bx-graphite: #2a2a2a;
  --bx-charcoal: #3a3a3a;
  --bx-iron: #6e6e73;
  --bx-stone: #86868b;
  --bx-silver: #c7c7cc;
  --bx-fog: #d2d2d7;
  --bx-mist: #e5e5ea;
  --bx-cloud: #f2f2f7;
  --bx-snow: #f5f5f7;
  --bx-white: #ffffff;

  /* Aliases legados (preservados para compatibilidade) */
  --navy: var(--bx-ink);
  --navy-deep: var(--bx-black);
  --navy-mid: var(--bx-graphite);
  --navy-soft: var(--bx-charcoal);

  --cyan: var(--bx-ink);
  --cyan-soft: var(--bx-charcoal);
  --cyan-deep: var(--bx-black);
  --cyan-accessible: var(--bx-ink);

  --accent-blue: var(--bx-ink);
  --accent-green: var(--bx-charcoal);
  --accent-gold: var(--bx-ink);
  --accent-gold-dark: var(--bx-black);
  --accent-highlight: var(--bx-ink);

  /* Superfícies — light (Apple-like) */
  --white-color: var(--bx-white);
  --white-background: var(--bx-white);
  --surface: var(--bx-snow);
  --surface-muted: var(--bx-cloud);
  --surface-alt: var(--bx-mist);
  --ink: var(--bx-ink);
  --muted: var(--bx-iron);
  --paragraph-color: var(--bx-iron);

  --text-primary: var(--bx-ink);

  /* CTAs e destaques */
  --primary-color: var(--bx-ink);
  --primary-text: var(--bx-ink);
  --btn-color: var(--bx-ink);
  --btn-hover: var(--bx-black);
  --btn-text-on-primary: var(--bx-white);

  /* Hero / slideshow — overlay editorial em preto */
  --background-color: var(--bx-black);
  --background-linear-color: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(10, 10, 10, 0.78) 55%,
    rgba(40, 40, 40, 0.45) 100%
  );
  --background-overlay: linear-gradient(
    120deg,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    transparent 100%
  );

  /* Mesh hero — luz fria sobre preto */
  --gradient-mesh:
    radial-gradient(60% 50% at 20% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    radial-gradient(50% 60% at 80% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
    radial-gradient(70% 80% at 70% 100%, rgba(20, 20, 20, 0.85) 0%, transparent 70%),
    linear-gradient(135deg, var(--bx-black) 0%, var(--bx-ink) 55%, var(--bx-graphite) 100%);

  /* Seções */
  --background-gallery: linear-gradient(
    160deg,
    var(--bx-black) 0%,
    var(--bx-ink) 50%,
    var(--bx-graphite) 100%
  );
  --background-contact: linear-gradient(
    180deg,
    var(--bx-black) 0%,
    #050505 100%
  );
  --background-second: var(--surface);

  /* Gradientes monocromáticos */
  --gradient-brand: linear-gradient(
    135deg,
    var(--bx-black) 0%,
    var(--bx-ink) 50%,
    var(--bx-charcoal) 130%
  );
  --gradient-brand-soft: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.02) 100%
  );
  --gradient-cyan: linear-gradient(135deg, var(--bx-ink) 0%, var(--bx-charcoal) 100%);

  /* Navegação */
  --menu-header-color: rgba(255, 255, 255, 0.85);
  --menu-header-text: var(--bx-ink);

  /* Forma e elevação — sutil e premium */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.14);
  --shadow-glow-gold: 0 12px 32px -10px rgba(0, 0, 0, 0.45);
  --shadow-glow-cyan: 0 12px 32px -10px rgba(0, 0, 0, 0.4);
  --shadow-glow-cyan-strong: 0 18px 48px -12px rgba(0, 0, 0, 0.55);
  --shadow-inner-vignette: inset 0 0 120px rgba(0, 0, 0, 0.35);

  --border-hairline: 1px solid rgba(0, 0, 0, 0.08);
  --border-accent-soft: 1px solid rgba(0, 0, 0, 0.16);
  --border-cyan: 1px solid rgba(0, 0, 0, 0.32);

  --section-py: clamp(3.5rem, 6vw, 6rem);

  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  --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.9s;
  --dur-hero: 0.95s;
  --dur-nav: 1s;

  /* Topbar — glass branco */
  --nav-surface: rgba(255, 255, 255, 0.72);
  --nav-border: rgba(0, 0, 0, 0.08);
  --nav-link: rgba(10, 10, 10, 0.82);
  --nav-link-hover-bg: rgba(0, 0, 0, 0.05);
  --nav-link-hover-text: var(--bx-black);
  --nav-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);

  /* Inversão de logo */
  --logo-invert: 0;
}

/* ============================================================
   Contextos sempre-escuros (hero, gallery, contact, footer)
   forçam acentos BRANCOS — independente do tema light/dark
   ============================================================ */
.slide-wrapper, .slideshow, .slide-image, .overlay,
#gallery, #contact, #footer, .why-choose-us {
  --cyan: #ffffff;
  --cyan-soft: #f5f5f7;
  --cyan-deep: #ffffff;
  --cyan-accessible: #ffffff;
  --navy: #000000;
  --navy-deep: #000000;
  --navy-mid: #141414;
  --navy-soft: #2a2a2a;
  --primary-color: #ffffff;
  --primary-text: #ffffff;
  --accent-blue: #ffffff;
  --accent-green: #f5f5f7;
  --accent-gold: #ffffff;
  --accent-gold-dark: #f5f5f7;
  --accent-highlight: #ffffff;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] {
  --text-primary: var(--bx-white);
  --paragraph-color: var(--bx-silver);
  --ink: var(--bx-white);
  --muted: var(--bx-stone);

  --white-background: #0a0a0a;
  --surface: #050505;
  --surface-muted: #0a0a0a;
  --surface-alt: #141414;

  --menu-header-text: var(--bx-white);

  --background-contact: linear-gradient(
    180deg,
    #000000 0%,
    #030303 100%
  );
  --background-second: var(--surface-alt);

  --primary-color: var(--bx-white);
  --primary-text: var(--bx-white);
  --btn-color: var(--bx-white);
  --btn-hover: var(--bx-snow);
  --btn-text-on-primary: var(--bx-black);

  --border-hairline: 1px solid rgba(255, 255, 255, 0.08);
  --border-accent-soft: 1px solid rgba(255, 255, 255, 0.16);
  --border-cyan: 1px solid rgba(255, 255, 255, 0.32);

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.75);
  --shadow-glow-gold: 0 12px 32px -10px rgba(255, 255, 255, 0.18);
  --shadow-glow-cyan: 0 12px 32px -10px rgba(255, 255, 255, 0.18);
  --shadow-glow-cyan-strong: 0 18px 48px -10px rgba(255, 255, 255, 0.28);

  --gradient-brand: linear-gradient(
    135deg,
    var(--bx-white) 0%,
    var(--bx-fog) 50%,
    var(--bx-silver) 130%
  );
  --gradient-brand-soft: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  --gradient-cyan: linear-gradient(135deg, var(--bx-white) 0%, var(--bx-fog) 100%);

  --nav-surface: rgba(10, 10, 10, 0.72);
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-link: rgba(245, 245, 247, 0.82);
  --nav-link-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-link-hover-text: var(--bx-white);
  --nav-shadow: 0 6px 32px rgba(0, 0, 0, 0.55);

  --logo-invert: 1;
}

/* ============================================================
   Logo inversion (BellarX)
   ============================================================ */
.styled-logo,
.bx-logo {
  filter: invert(var(--logo-invert));
  transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.is-landing-route .nav-landing.is-top .styled-logo {
  filter: invert(1);
}

/* ============================================================
   Tipografia premium
   ============================================================ */
:root {
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system,
    BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --letter-tight: -0.03em;
  --letter-snug: -0.02em;
  --letter-normal: -0.01em;
}

body {
  font-family: var(--font-body);
  letter-spacing: var(--letter-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--white-background);
  color: var(--text-primary);
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: var(--letter-tight);
  font-weight: 700;
  color: var(--text-primary);
}

/* ============================================================
   Keyframes globais
   ============================================================ */
@keyframes revealUpFade {
  from { opacity: 0; transform: translate3d(0, 48px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes revealFadeUp {
  from { opacity: 0; transform: translate3d(0, 32px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes revealScaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@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); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); }
  50% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
}
@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

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