/* Definition of the design system - TikTok Theme */

:root {
  /* TikTok Dark Theme (default) */
  --background: 0 0% 4%;
  --foreground: 0 0% 98%;

  /* TikTok Signature Colors */
  --tiktok-red: 348 98% 56%;
  --tiktok-cyan: 174 100% 47%;
  --tiktok-red-glow: 348 98% 65%;

  /* Primary - TikTok Red */
  --primary: 348 98% 56%;
  --primary-foreground: 0 0% 100%;
  
  /* Accent - Lighter for contrast */
  --accent: 0 0% 12%;
  --accent-foreground: 0 0% 98%;

  --card: 0 0% 8%;
  --card-foreground: 0 0% 98%;

  --popover: 0 0% 8%;
  --popover-foreground: 0 0% 98%;

  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 98%;

  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 55%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 0% 15%;
  --input: 0 0% 15%;
  --ring: 348 98% 56%;

  --radius: 1.25rem;

  /* Spinner */
  --spinner-color: 0 0% 100%;
  
  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme - High Contrast TikTok Light */
.light {
  --background: 0 0% 96%;
  --foreground: 0 0% 5%;

  --tiktok-red: 348 98% 45%;
  --tiktok-cyan: 174 100% 35%;
  --tiktok-red-glow: 348 98% 55%;

  --primary: 348 98% 45%;
  --primary-foreground: 0 0% 100%;
  
  --accent: 0 0% 90%;
  --accent-foreground: 0 0% 10%;

  --card: 0 0% 100%;
  --card-foreground: 0 0% 5%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 5%;

  --secondary: 0 0% 92%;
  --secondary-foreground: 0 0% 10%;

  --muted: 0 0% 93%;
  --muted-foreground: 0 0% 30%;

  --destructive: 0 84% 45%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 0% 78%;
  --input: 0 0% 85%;
  --ring: 348 98% 45%;

  --spinner-color: 348 98% 45%;
}

.dark {
  --background: 0 0% 4%;
  --foreground: 0 0% 98%;
  --card: 0 0% 7%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 7%;
  --popover-foreground: 0 0% 98%;
  --primary: 348 98% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 55%;
  --accent: 0 0% 12%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 12%;
  --input: 0 0% 12%;
  --ring: 348 98% 56%;
}

/* Bloquear impressão da página */
@media print {
  html, body { display: none !important; }
}

* {
  border-color: hsl(var(--border));
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}

/* TikTok Style Cards - Super Rounded */
.card-tiktok {
  background: hsl(var(--card));
  border-radius: 1.5rem;
  border: 1px solid hsl(var(--border) / 0.5);
}

/* Pill Shapes */
.pill {
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
}

/* Floating Shadow - TikTok Style */
.shadow-float {
  box-shadow: 
    0 10px 40px -10px rgba(0, 0, 0, 0.5),
    0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Soft Glow */
.glow-soft {
  box-shadow: 0 0 60px -15px hsla(348, 98%, 56%, 0.25);
}

/* Glassmorphism Effects - Dark Mode */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.glass-card {
  background: rgba(18, 18, 18, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.5rem;
}

.glass-dark {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Light Mode Glassmorphism - High Contrast */
.light .glass {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
.light .glass-card {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}
.light .glass-dark {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.light .shadow-float {
  box-shadow: 
    0 10px 40px -10px rgba(0, 0, 0, 0.18),
    0 4px 6px -2px rgba(0, 0, 0, 0.1);
}
.light .glow-soft {
  box-shadow: 0 4px 40px -10px hsla(348, 98%, 45%, 0.3);
}
.light .card-tiktok {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

/* TikTok Gradient */
.tiktok-gradient { background: linear-gradient(135deg, hsl(348 98% 56%) 0%, hsl(174 100% 47%) 100%); }
.tiktok-gradient-text {
  background: linear-gradient(135deg, hsl(348 98% 56%) 0%, hsl(348 98% 70%) 50%, hsl(174 100% 47%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tiktok-gradient-red { background: linear-gradient(135deg, hsl(348 98% 56%) 0%, hsl(348 98% 65%) 100%); }

/* Neon Glow Effects */
.neon-red { box-shadow: 0 0 30px hsla(348, 98%, 56%, 0.3), 0 0 60px hsla(348, 98%, 56%, 0.15); }
.neon-cyan { box-shadow: 0 0 30px hsla(174, 100%, 47%, 0.3), 0 0 60px hsla(174, 100%, 47%, 0.15); }
.light .neon-red { box-shadow: 0 6px 30px hsla(348, 98%, 45%, 0.28); }
.light .neon-cyan { box-shadow: 0 6px 30px hsla(174, 100%, 35%, 0.28); }

.text-glow-red { text-shadow: 0 0 15px hsla(348, 98%, 56%, 0.5), 0 0 30px hsla(348, 98%, 56%, 0.3); }
.text-glow-cyan { text-shadow: 0 0 15px hsla(174, 100%, 47%, 0.5), 0 0 30px hsla(174, 100%, 47%, 0.3); }
.light .text-glow-red, .light .text-glow-cyan { text-shadow: none; }

.gpu-accelerate { transform: translateZ(0); will-change: transform; }
.smooth-transition { transition: var(--transition-smooth); }

/* Header sempre escuro */
.header-fixed-dark {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.light .header-fixed-dark {
  background: rgba(0, 0, 0, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Keyframes */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px hsla(348, 98%, 56%, 0.4), 0 4px 15px rgba(0, 0, 0, 0.3); transform: scale(1); }
  50% { box-shadow: 0 0 40px hsla(348, 98%, 56%, 0.5), 0 8px 25px rgba(0, 0, 0, 0.4); transform: scale(1.01); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 25px hsla(348, 98%, 56%, 0.35); transform: scale(1); }
  50% { box-shadow: 0 0 45px hsla(348, 98%, 56%, 0.5); transform: scale(1.01); }
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }
@keyframes neon-pulse { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.85; filter: brightness(1.15); } }
@keyframes bounce-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes slide-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes scale-in { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }

.animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }
.animate-shimmer { animation: shimmer 2s linear infinite; background-size: 200% 100%; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-neon-pulse { animation: neon-pulse 2s ease-in-out infinite; }
.animate-bounce-soft { animation: bounce-soft 2s ease-in-out infinite; }
.animate-wiggle { animation: wiggle 0.5s ease-in-out; }
.animate-slide-up { animation: slide-up 0.5s ease-out forwards; }
.animate-fade-in { animation: fade-in 0.3s ease-out forwards; }
.animate-scale-in { animation: scale-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Conversion Page */
.conversion-prize-light {
  background: linear-gradient(135deg, hsl(348 100% 50%) 0%, hsl(340 100% 55%) 35%, hsl(330 95% 50%) 65%, hsl(174 100% 38%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 20px rgba(254, 44, 85, 0.25));
}
@keyframes float-slow { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } }
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-float-slower { animation: float-slow 12s ease-in-out infinite; }

/* Custom utility overrides */
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.bg-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* Botão base TikTok */
button.btn-tiktok {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700;
  border-radius: var(--radius);
  transition: transform 0.2s, filter 0.2s;
}
button.btn-tiktok:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}
button.btn-tiktok:active {
  transform: scale(0.98);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}