@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --brand-primary: #4f46e5;
  --brand-primary-deep: #4338ca;
  --brand-accent: #f59e0b;
  --brand-ink: #0f172a;
  color-scheme: only light;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-surface-soft: var(--surface-soft);
  --color-brand-primary: var(--brand-primary);
  --color-brand-primary-deep: var(--brand-primary-deep);
  --color-brand-accent: var(--brand-accent);
  --color-brand-ink: var(--brand-ink);
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: "Inter", system-ui, -apple-system, sans-serif;
}

html,
body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans);
}

body {
  background: var(--background);
  color: var(--foreground);
  background-image:
    radial-gradient(1000px 400px at 0% 0%, rgba(79, 70, 229, 0.05), transparent 100%),
    radial-gradient(800px 300px at 100% 100%, rgba(79, 70, 229, 0.03), transparent 100%);
}

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

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

.fx-fade-up {
  animation: fade-up 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fx-fade-up-delay-1 {
  animation: fade-up 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 100ms;
}

.fx-fade-up-delay-2 {
  animation: fade-up 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 200ms;
}

.fx-float {
  animation: float-y 4s ease-in-out infinite;
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
}

.product-shadow {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.product-shadow-hover {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}