/* ==========================================================================
   BULLPEN ADE DESIGN SYSTEM - TOKENS & NATIVE STYLES
   Version: 10.0 (Tauri v2 + Rust Architecture Alignment)
   ========================================================================== */

:root {
  /* Surface & Canvas Tokens */
  --bp-bg-void: #050612;
  --bp-bg-surface: #0a0c10;
  --bp-bg-panel: #0d1117;
  --bp-bg-card: #161b22;
  --bp-bg-card-hover: #21262d;
  --bp-bg-card-active: #282e37;

  /* Borders & Dividers */
  --bp-border-dim: #1e242c;
  --bp-border-subtle: #21262d;
  --bp-border-default: #30363d;
  --bp-border-bright: #484f58;

  /* Brand Signature Gradient (#00D7E8 -> #176BFF -> #B20BFA) */
  --bp-cyan: #00D7E8;
  --bp-cyan-glow: rgba(0, 215, 232, 0.35);
  --bp-blue: #176BFF;
  --bp-blue-glow: rgba(23, 107, 255, 0.35);
  --bp-purple: #B20BFA;
  --bp-purple-glow: rgba(178, 11, 250, 0.35);

  /* Status Colors */
  --bp-success: #10b981;
  --bp-warning: #f59e0b;
  --bp-danger: #ef4444;
  --bp-info: #0284c7;

  /* Typography Colors */
  --bp-text-primary: #f8fafc;
  --bp-text-secondary: #cbd5e1;
  --bp-text-muted: #94a3b8;
  --bp-text-dim: #64748b;

  /* Fonts */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

/* Glassmorphism & Surface Effects */
.glass-panel {
  background: rgba(13, 17, 23, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bp-border-default);
}

.glass-card {
  background: rgba(22, 27, 34, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bp-border-subtle);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(33, 38, 45, 0.85);
  border-color: var(--bp-border-bright);
  transform: translateY(-2px);
}

/* Brand Gradient Text & Borders */
.gradient-text {
  background: linear-gradient(135deg, #00D7E8 0%, #176BFF 50%, #B20BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-cyan {
  background: linear-gradient(135deg, #a5f3fc 0%, #00D7E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-border-box {
  position: relative;
  border-radius: var(--radius-lg);
  background: #0d1117;
}

.gradient-border-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 215, 232, 0.6), rgba(23, 107, 255, 0.3), rgba(178, 11, 250, 0.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Ambient Radial Glow */
.hero-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 215, 232, 0.15) 0%, rgba(23, 107, 255, 0.1) 40%, rgba(178, 11, 250, 0.05) 70%, transparent 100%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0c10;
}
::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

/* Blinking Cursor for Terminal / Interactive Demo */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cursor-blink {
  animation: blink 1s infinite;
}

/* Subtle Shimmer for High Priority CTAs */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 3s infinite;
}

/* Custom Range Slider (ROI Calculator) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #161b22;
  border-radius: 9999px;
  height: 8px;
  outline: none;
  border: 1px solid #30363d;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00D7E8;
  cursor: pointer;
  border: 2px solid #050612;
  box-shadow: 0 0 10px rgba(0, 215, 232, 0.6);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #ffffff;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00D7E8;
  cursor: pointer;
  border: 2px solid #050612;
  box-shadow: 0 0 10px rgba(0, 215, 232, 0.6);
}

/* Modal Fade Animation */
@keyframes bpFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.modal-animate-in {
  animation: bpFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scroll Offset for Fixed Navigation */
html {
  scroll-padding-top: 5rem;
}

/* Accessibility: Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--bp-cyan);
  color: #050612;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(0, 215, 232, 0.5);
  transition: top 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Universal Accessible Focus Ring */
:focus-visible {
  outline: 2px solid var(--bp-cyan);
  outline-offset: 2px;
}

/* Performance: Content Visibility for Below-the-Fold Heavy Sections */
#comparativo,
#roi,
#faq {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

/* Accessibility: Reduced Motion for Users with Vestibular Disorders */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}