/* DigiLivo Website — tokens sitio público */
@import url("brand-tokens.css");

:root {
  /* Spacing */
  --dgl-section-gap: 100px;
  --dgl-section-gap-sm: 60px;

  /* Navbar / marketing chrome */
  --dgl-gradient-navbar-scrolled: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(244, 248, 242, 0.88) 42%,
    rgba(235, 245, 229, 0.85) 68%,
    rgba(120, 212, 80, 0.12) 100%
  );
  --dgl-gradient-navbar-neon: linear-gradient(
    90deg,
    transparent 0%,
    rgba(91, 191, 53, 0.4) 25%,
    rgba(120, 212, 80, 0.95) 50%,
    rgba(91, 191, 53, 0.4) 75%,
    transparent 100%
  );
  --dgl-navbar-blur: 16px;

  --dgl-dropdown-bg-dark: var(--dgl-black);
  --dgl-dropdown-bg-light: var(--dgl-white);
  --dgl-dropdown-text-on-dark: #d8e6d8;
  --dgl-dropdown-text-on-light: var(--dgl-text-dark);
  --dgl-dropdown-hover-on-dark: rgba(255, 255, 255, 0.1);
  --dgl-dropdown-hover-on-light: var(--dgl-bg-tint);
  --dgl-shadow-dropdown-dark: 0 10px 60px rgba(0, 0, 0, 0.45);
  --dgl-shadow-dropdown-light: 0 10px 40px rgba(91, 191, 53, 0.15), 0 4px 20px rgba(0, 0, 0, 0.08);
  --dgl-shadow-navbar-scrolled:
    0 4px 24px rgba(91, 191, 53, 0.12),
    0 12px 48px rgba(11, 25, 44, 0.06),
    0 0 0 1px rgba(91, 191, 53, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* FAB */
  --dgl-fab-size: 58px;
  --dgl-fab-scroll-size: 48px;
  --dgl-fab-inset: 28px;
  --dgl-fab-gap: 18px;
  --dgl-fab-scroll-green: var(--dgl-base-light);
  --dgl-fab-scroll-slate: #658638;
  --dgl-fab-scroll-navy: #3f628a;
  --dgl-fab-scroll-accent: var(--dgl-base);
  --dgl-fab-scroll-bg: linear-gradient(
    155deg,
    var(--dgl-fab-scroll-green) 0%,
    var(--dgl-fab-scroll-slate) 38%,
    var(--dgl-fab-scroll-navy) 100%
  );
  --dgl-fab-scroll-bg-hover: linear-gradient(155deg, #8ee066 0%, #5a8a4a 38%, #3f628a 100%);
  --dgl-fab-scroll-icon: var(--dgl-white);
  --dgl-fab-scroll-border: var(--dgl-fab-scroll-accent);
  --dgl-fab-scroll-shadow:
    0 4px 20px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 14px rgba(91, 191, 53, 0.35);
  --dgl-fab-scroll-shadow-hover:
    0 6px 24px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 18px rgba(91, 191, 53, 0.45);
}