@import "./styles/tokens.css";
@import "./styles/animations.css";
@import "tailwindcss";
@config "../tailwind.config.js";

@layer utilities {
  .glass {
    @apply backdrop-blur-xl bg-white/70 border border-white/20;
  }
  .glass-subtle {
    @apply backdrop-blur-md bg-white/50 border border-white/10;
  }
  .glass-card {
    @apply backdrop-blur-xl bg-white/60 border border-white/20 shadow-xl;
  }
  .dark .glass {
    @apply bg-stone-900/70 border-white/10;
  }
  .dark .glass-subtle {
    @apply bg-stone-900/50 border-white/5;
  }
  .dark .glass-card {
    @apply bg-stone-900/60 border-white/10;
  }
  .gradient-mesh {
    background-image:
      radial-gradient(
        at 27% 37%,
        hsla(35, 90%, 48%, 0.25) 0px,
        transparent 50%
      ),
      radial-gradient(at 97% 21%, hsla(30, 50%, 60%, 0.2) 0px, transparent 50%),
      radial-gradient(at 52% 99%, hsla(35, 90%, 48%, 0.15) 0px, transparent 50%);
  }
  .gradient-mesh-dark {
    background-image:
      radial-gradient(
        at 27% 37%,
        hsla(35, 90%, 48%, 0.15) 0px,
        transparent 50%
      ),
      radial-gradient(
        at 97% 21%,
        hsla(30, 50%, 60%, 0.12) 0px,
        transparent 50%
      ),
      radial-gradient(at 52% 99%, hsla(35, 90%, 48%, 0.1) 0px, transparent 50%);
  }
}

@layer base {
  :root {
    /* Light mode - warm, minimal palette */
    --background: 30 20% 98%; /* Very light warm gray */
    --foreground: 25 25% 15%; /* Dark warm gray */
    --card: 30 20% 100%; /* Pure white with hint of warmth */
    --card-foreground: 25 25% 15%;
    --popover: 30 20% 100%;
    --popover-foreground: 25 25% 15%;
    --primary: 35 90% 48%; /* Warm amber/orange */
    --primary-foreground: 30 20% 98%;
    --secondary: 30 15% 92%; /* Light warm gray */
    --secondary-foreground: 25 25% 15%;
    --muted: 30 10% 88%; /* Muted warm gray */
    --muted-foreground: 25 15% 40%;
    --accent: 35 90% 48%; /* Same as primary for consistency */
    --accent-foreground: 30 20% 98%;
    --destructive: 0 72% 51%; /* Warm red */
    --destructive-foreground: 30 20% 98%;
    --border: 30 15% 90%; /* Subtle warm gray border */
    --input: 30 15% 90%;
    --ring: 35 90% 48%;
    --radius: 0.5rem;
  }

  .dark {
    /* Dark mode - warm, minimal palette */
    --background: 25 15% 10%; /* Very dark warm gray */
    --foreground: 30 15% 88%; /* Light warm gray */
    --card: 25 12% 14%; /* Slightly lighter warm gray */
    --card-foreground: 30 15% 88%;
    --popover: 25 12% 14%;
    --popover-foreground: 30 15% 88%;
    --primary: 35 90% 48%; /* Same warm amber/orange */
    --primary-foreground: 25 15% 10%;
    --secondary: 25 10% 20%; /* Dark warm gray */
    --secondary-foreground: 30 15% 88%;
    --muted: 25 8% 25%; /* Muted dark warm gray */
    --muted-foreground: 30 10% 65%;
    --accent: 35 90% 48%; /* Same as primary for consistency */
    --accent-foreground: 25 15% 10%;
    --destructive: 0 62% 45%; /* Warm red for dark mode */
    --destructive-foreground: 30 15% 88%;
    --border: 25 10% 22%; /* Subtle dark warm gray border */
    --input: 25 10% 22%;
    --ring: 35 90% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-feature-settings:
      "kern" 1,
      "liga" 1,
      "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Typography improvements */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply tracking-tight font-semibold;
  }

  p {
    @apply leading-relaxed;
  }

  /* Smoother animations */
  * {
    @apply transition-colors duration-200;
  }

  /* Custom scrollbar styling */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300/50 rounded-full;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400/70;
  }

  .dark ::-webkit-scrollbar-thumb {
    @apply bg-stone-700/50;
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    @apply bg-stone-600/70;
  }

  /* Firefox scrollbar styling */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
  }

  .dark * {
    scrollbar-color: rgba(68, 64, 60, 0.5) transparent;
  }

  /* Mobile optimizations */
  @media (max-width: 768px) {
    /* Improve scrolling performance on mobile */
    * {
      -webkit-overflow-scrolling: touch;
    }

    /* Prevent text selection on interactive elements */
    button,
    .cursor-pointer {
      -webkit-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    /* Ensure inputs zoom properly on iOS */
    input,
    textarea,
    select {
      font-size: 16px;
    }

    /* Hide scrollbars on mobile for cleaner look */
    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
  }
}
