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

@layer base {
  * {
    @apply border-border;
  }

  html,
  body {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

@layer components {
  .hero-bg {
    background: linear-gradient(180deg, #FFE0D0 0%, #F15A24 45%, #C42D0B 100%);
  }

  .dark-section {
    background-color: #0C0C0C;
    color: #D7E2EA;
  }
}

:root {
  --background: oklch(0.98 0.02 95);
  --foreground: oklch(0.25 0 0);
  --card: oklch(0.25 0 0);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.98 0 0);
  --popover-foreground: oklch(0.25 0 0);
  --primary: oklch(0.98 0.18 100);
  --primary-foreground: oklch(0.2 0 0);
  --secondary: oklch(0.35 0 0);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.92 0.08 95);
  --muted-foreground: oklch(0.45 0 0);
  --accent: oklch(0.92 0.14 110);
  --accent-foreground: oklch(0.3 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.88 0.05 95);
  --input: oklch(0.88 0.05 95);
  --ring: oklch(0.92 0.14 110);
  --radius: 1.5rem;
}

@layer utilities {
  .theme-scrollbar::-webkit-scrollbar {
    width: 8px;
  }
  .theme-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .theme-scrollbar::-webkit-scrollbar-thumb {
    background-color: #1A0F08;
    border-radius: 10px;
  }
  .theme-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #E63F19;
  }
  .theme-scrollbar {
    scrollbar-color: #1A0F08 transparent;
    scrollbar-width: thin;
  }
}