/* Default Theme Styles */

[data-theme="default"] {
  /* Color System */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  
  /* Radius */
  --radius: 0.5rem;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Menlo', 'Monaco', monospace;
}

/* Dark mode support (optional) */
[data-theme="default"].dark {
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
  
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

/* Theme-specific component styles */
[data-theme="default"] {
  /* Product Card Styles */
  .product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  /* Category Tree Styles */
  .category-tree-item {
    transition: background-color 0.15s ease;
  }
  
  .category-tree-item:hover {
    background-color: hsl(var(--accent));
  }
  
  .category-tree-item.selected {
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
  }
  
  /* Filter Styles */
  .filter-section {
    border-radius: var(--radius);
    background: hsl(var(--card));
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  /* Header Styles */
  .theme-header {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
  }
  
  /* Footer Styles */
  .theme-footer {
    background: linear-gradient(to bottom, hsl(var(--muted) / 0.5), hsl(var(--muted)));
  }
  
  /* Button Hover Effects */
  .theme-button {
    transition: all 0.2s ease;
  }
  
  .theme-button:hover {
    transform: scale(1.02);
  }
  
  /* Card Hover Effects */
  .theme-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .theme-card:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  }
  
  /* Loading States */
  .theme-skeleton {
    background: linear-gradient(
      90deg,
      hsl(var(--muted)),
      hsl(var(--muted) / 0.7),
      hsl(var(--muted))
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
  }
  
  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  
  /* Scrollbar Styles */
  .theme-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }
  
  .theme-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  .theme-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .theme-scrollbar::-webkit-scrollbar-thumb {
    background-color: hsl(var(--border));
    border-radius: var(--radius);
  }
  
  .theme-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground));
  }
}