Youtube-tool/src/styles/global.css

@import "tailwindcss";

@theme {
  /* YouTube Red & Black Theme */
  --color-primary: #FF0000;
  --color-primary-dark: #CC0000;
  --color-canvas: #0F0F0F;
  --color-canvas-soft: #1F1F1F;
  --color-canvas-soft-2: #272727;
  --color-ink: #FFFFFF;
  --color-body: #AAAAAA;
  --color-mute: #717171;
  --color-hairline: #3F3F3F;
  --color-hairline-strong: #FF0000;
  
  /* Typography */
  --font-roboto: "Roboto", sans-serif;
  --font-geist-mono: "Geist Mono", monospace;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-canvas text-ink font-roboto antialiased selection:bg-primary/30 selection:text-white;
    font-style: normal !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight text-white;
    font-style: normal !important;
  }

  /* Custom Animations */
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
  }

  .animate-fade-in {
    animation: fade-in 0.6s ease-out both;
  }

  .animate-slide-up {
    animation: slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .animate-scale-in {
    animation: scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  /* Staggered entry helpers */
  .stagger-1 { animation-delay: 0.1s; }
  .stagger-2 { animation-delay: 0.2s; }
  .stagger-3 { animation-delay: 0.3s; }
  .stagger-4 { animation-delay: 0.4s; }
}

@layer components {
  .btn-primary {
    @apply bg-primary text-white font-medium px-5 h-11 flex items-center justify-center rounded-pill transition-all hover:bg-primary-dark active:scale-[0.98] shadow-lg shadow-primary/10;
  }
  
  .btn-secondary {
    @apply bg-canvas-soft-2 text-white font-medium px-5 h-11 flex items-center justify-center rounded-pill transition-all hover:bg-hairline active:scale-[0.98];
  }

  .nav-link {
    @apply px-4 py-2 text-sm font-medium rounded-pill transition-all hover:bg-canvas-soft-2;
  }

  .card {
    @apply bg-canvas-soft border border-hairline/50 rounded-xl p-6 transition-all hover:border-hairline;
  }

  .input-field {
    @apply bg-black border border-hairline rounded-md h-12 px-4 text-base w-full focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all text-white placeholder:text-mute;
  }

  /* Search Box Glow */
  .search-box-glow {
    @apply transition-all duration-300;
  }
  .search-box-glow:focus-within {
    @apply border-primary/40 shadow-[0_0_20px_rgba(255,0,0,0.15)] ring-1 ring-primary/20;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}