@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

/* Custom scrollbar adaptively switching with .dark */
html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html.dark ::-webkit-scrollbar-track {
  background: #0B0F17;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

html:not(.dark) ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html:not(.dark) ::-webkit-scrollbar-track {
  background: #F1F5F9;
}
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Radian & ZeroDrift Inspired Motorsport Components */
.btn-pill-primary {
  @apply inline-flex items-center justify-between gap-3 px-5 py-2.5 rounded-full font-semibold text-sm transition-all duration-300;
  @apply bg-racing-red text-white hover:bg-racing-red-dark hover:shadow-lg hover:shadow-red-600/25 active:scale-95;
}

.btn-pill-secondary {
  @apply inline-flex items-center justify-between gap-3 px-5 py-2.5 rounded-full font-medium text-sm transition-all duration-300;
  @apply bg-slate-100 text-slate-800 border border-slate-200 hover:bg-slate-200 hover:border-slate-300;
  @apply dark:bg-slate-800/80 dark:text-slate-200 dark:border-slate-700 dark:hover:bg-slate-700/80 dark:hover:border-slate-600 active:scale-95;
}

.badge-telemetry {
  @apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded font-mono text-xs font-semibold tracking-wider uppercase;
}

.glass-panel {
  @apply bg-white/90 dark:bg-racing-slate-900/90 backdrop-blur-md border border-slate-200 dark:border-slate-800 shadow-sm dark:shadow-2xl;
}

.title-main {
  @apply text-xl font-bold sm:text-2xl md:text-3xl xl:text-4xl tracking-tight text-slate-900 dark:text-white;
}

.title-secondary {
  @apply text-sm font-semibold sm:text-base text-slate-700 dark:text-slate-300;
}

.section {
  @apply mt-[30px] flex-col md:mt-[45px] xl:mt-[60px];
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */