/* src/App.css */
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 2em;
}
.read-the-docs {
  color: #888;
}

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --primary: 152 45% 52%;
    --primary-foreground: 40 8% 97%;
    --primary-light: 152 45% 89%;
    --primary-dark: 152 45% 23%;
    --secondary: 200 65% 55%;
    --secondary-foreground: 40 8% 97%;
    --secondary-light: 200 65% 90%;
    --accent: 32 90% 60%;
    --accent-foreground: 40 12% 15%;
    --accent-light: 32 90% 92%;
    --background: 40 20% 98%;
    --foreground: 40 12% 15%;
    --card: 0 0% 100%;
    --card-foreground: 40 12% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 40 12% 15%;
    --muted: 40 10% 94%;
    --muted-foreground: 40 10% 45%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --success: 152 45% 52%;
    --success-foreground: 40 8% 97%;
    --warning: 45 93% 47%;
    --warning-foreground: 40 12% 15%;
    --info: 200 65% 55%;
    --info-foreground: 40 8% 97%;
    --border: 40 15% 88%;
    --input: 40 15% 88%;
    --ring: 152 45% 52%;
    --radius: 0.75rem;
    --sidebar-background: 40 20% 96%;
    --sidebar-foreground: 40 12% 15%;
    --sidebar-primary: 152 45% 52%;
    --sidebar-primary-foreground: 40 8% 97%;
    --sidebar-accent: 152 45% 89%;
    --sidebar-accent-foreground: 152 45% 23%;
    --sidebar-border: 40 15% 88%;
    --sidebar-ring: 152 45% 52%;
    --gradient-hero:
      linear-gradient(
        135deg,
        hsl(152 45% 52%),
        hsl(200 65% 55%));
    --gradient-warm:
      linear-gradient(
        135deg,
        hsl(32 90% 60%),
        hsl(45 93% 60%));
    --gradient-card:
      linear-gradient(
        180deg,
        hsl(0 0% 100%),
        hsl(40 20% 98%));
    --gradient-ocean:
      linear-gradient(
        135deg,
        hsl(200 65% 55%),
        hsl(210 70% 45%));
    --shadow-sm: 0 1px 2px rgba(35, 31, 26, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(35, 31, 26, 0.08), 0 2px 4px -1px rgba(35, 31, 26, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(35, 31, 26, 0.1), 0 4px 6px -2px rgba(35, 31, 26, 0.05);
    --shadow-glow: 0 0 20px rgba(82, 183, 136, 0.25);
    --shadow-card-hover: 0 8px 25px -5px rgba(82, 183, 136, 0.2);
    --coin: 45 90% 55%;
    --coin-foreground: 40 12% 15%;
  }
  .dark {
    --primary: 152 45% 50%;
    --primary-foreground: 40 8% 97%;
    --primary-light: 152 35% 25%;
    --primary-dark: 152 45% 70%;
    --secondary: 200 55% 50%;
    --secondary-foreground: 40 8% 97%;
    --secondary-light: 200 40% 25%;
    --accent: 32 80% 55%;
    --accent-foreground: 40 8% 97%;
    --accent-light: 32 50% 25%;
    --background: 40 15% 10%;
    --foreground: 40 10% 92%;
    --card: 40 12% 14%;
    --card-foreground: 40 10% 92%;
    --popover: 40 12% 14%;
    --popover-foreground: 40 10% 92%;
    --muted: 40 10% 20%;
    --muted-foreground: 40 10% 60%;
    --destructive: 0 62% 45%;
    --destructive-foreground: 0 0% 100%;
    --success: 152 45% 45%;
    --success-foreground: 40 8% 97%;
    --warning: 45 80% 45%;
    --warning-foreground: 40 8% 97%;
    --info: 200 55% 50%;
    --info-foreground: 40 8% 97%;
    --border: 40 10% 22%;
    --input: 40 10% 22%;
    --ring: 152 45% 50%;
    --sidebar-background: 40 12% 12%;
    --sidebar-foreground: 40 10% 92%;
    --sidebar-primary: 152 45% 50%;
    --sidebar-primary-foreground: 40 8% 97%;
    --sidebar-accent: 152 35% 25%;
    --sidebar-accent-foreground: 152 45% 70%;
    --sidebar-border: 40 10% 22%;
    --sidebar-ring: 152 45% 50%;
    --gradient-hero:
      linear-gradient(
        135deg,
        hsl(152 45% 40%),
        hsl(200 55% 40%));
    --gradient-warm:
      linear-gradient(
        135deg,
        hsl(32 80% 50%),
        hsl(45 80% 50%));
    --gradient-card:
      linear-gradient(
        180deg,
        hsl(40 12% 14%),
        hsl(40 15% 10%));
    --gradient-ocean:
      linear-gradient(
        135deg,
        hsl(200 55% 45%),
        hsl(210 60% 35%));
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(82, 183, 136, 0.3);
    --shadow-card-hover: 0 8px 25px -5px rgba(82, 183, 136, 0.25);
    --coin: 45 80% 50%;
    --coin-foreground: 40 8% 97%;
  }
}
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-family:
      "Inter",
      "Noto Sans SC",
      system-ui,
      sans-serif;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-semibold tracking-tight;
  }
}
@layer utilities {
  .text-gradient-hero {
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .text-gradient-warm {
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .bg-gradient-hero {
    background: var(--gradient-hero);
  }
  .bg-gradient-warm {
    background: var(--gradient-warm);
  }
  .bg-gradient-card {
    background: var(--gradient-card);
  }
  .bg-gradient-ocean {
    background: var(--gradient-ocean);
  }
  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }
  .shadow-card-hover {
    box-shadow: var(--shadow-card-hover);
  }
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  .animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
  }
  .animate-pulse-soft {
    animation: pulse-soft 2s ease-in-out infinite;
  }
  .animate-wave {
    animation: wave 2.5s ease-in-out infinite;
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes pulse-soft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
@keyframes wave {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
html,
body,
#root {
  width: 100%;
  min-height: 100%;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--muted));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}
.card-interactive {
  @apply transition-all duration-300 ease-out;
}
.card-interactive:hover {
  @apply -translate-y-1 shadow-card-hover;
}
.coin-badge {
  @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full font-semibold;
  background: hsl(var(--coin) / 0.15);
  color: hsl(var(--coin));
}
.dark .coin-badge {
  background: hsl(var(--coin) / 0.25);
}