@import "tailwindcss";

/* Theme – semantic tokens (light) */
@theme {
  --color-background: oklch(0.98 0.008 65);
  --color-foreground: oklch(0.20 0.03 40);
  --color-primary: oklch(0.55 0.18 40);
  --color-primary-foreground: oklch(0.98 0.01 60);
  --color-secondary: oklch(0.94 0.02 70);
  --color-secondary-foreground: oklch(0.30 0.04 40);
  --color-muted: oklch(0.95 0.015 65);
  --color-muted-foreground: oklch(0.40 0.03 45);
  --color-card: oklch(0.995 0.005 60);
  --color-card-foreground: var(--color-foreground);
  --color-border: oklch(0.88 0.02 60);
  --color-ring: oklch(0.55 0.18 40);
  --color-accent: oklch(0.45 0.15 15);
  --color-accent-foreground: oklch(0.98 0.01 60);
  --radius: 0.625rem;
}

.dark {
  --color-background: oklch(0.15 0.02 40);
  --color-foreground: oklch(0.92 0.02 70);
  --color-primary: oklch(0.70 0.16 55);
  --color-primary-foreground: oklch(0.15 0.03 40);
  --color-secondary: oklch(0.25 0.025 45);
  --color-secondary-foreground: oklch(0.88 0.02 70);
  --color-muted: oklch(0.23 0.02 42);
  --color-muted-foreground: oklch(0.60 0.03 65);
  --color-card: oklch(0.19 0.025 40);
  --color-border: oklch(0.30 0.025 42);
  --color-ring: oklch(0.70 0.16 55);
  --color-accent: oklch(0.55 0.14 20);
  --color-accent-foreground: oklch(0.95 0.01 70);
}

/* Gradient animation for featured strip */
@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.animate-gradient-x {
  animation: gradient-x 3s ease infinite;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--color-background);
  color: var(--color-foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Tailwind v4 uses these; ensure border uses theme */
[class*="border"] {
  border-color: var(--color-border);
}

/* Optional: font preload in index.html for Inter + Space Grotesk */
h1, h2, h3, h4 {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
