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

/* === Design System === */
@layer base {
:root {
--background: 40 30% 98%;
--foreground: 220 15% 25%;
--card: 0 0% 100%;
--card-foreground: 220 15% 25%;
--popover: 0 0% 100%;
--popover-foreground: 220 15% 25%;
--primary: 150 30% 45%;
--primary-foreground: 0 0% 100%;
--secondary: 40 35% 90%;
--secondary-foreground: 220 15% 25%;
--muted: 40 20% 95%;
--muted-foreground: 220 10% 50%;
--accent: 200 40% 85%;
--accent-foreground: 220 15% 25%;
--destructive: 350 50% 60%;
--destructive-foreground: 0 0% 100%;
--border: 40 20% 88%;
--input: 40 20% 92%;
--ring: 150 30% 45%;
--radius: 0.75rem;
--sidebar-background: 40 35% 96%;
--sidebar-foreground: 220 15% 25%;
--sidebar-primary: 150 30% 45%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 40 40% 92%;
--sidebar-accent-foreground: 220 15% 25%;
--sidebar-border: 40 20% 88%;
--sidebar-ring: 150 30% 45%;
--shadow-soft: 0 2px 20px -5px hsl(220 15% 25% / 0.08);
--shadow-medium: 0 4px 30px -8px hsl(220 15% 25% / 0.12);
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
--background: 220 20% 12%;
--foreground: 40 30% 95%;
--card: 220 20% 15%;
--card-foreground: 40 30% 95%;
--popover: 220 20% 15%;
--popover-foreground: 40 30% 95%;
--primary: 150 30% 50%;
--primary-foreground: 0 0% 100%;
--secondary: 220 15% 20%;
--secondary-foreground: 40 30% 95%;
--muted: 220 15% 18%;
--muted-foreground: 220 10% 60%;
--accent: 200 30% 30%;
--accent-foreground: 40 30% 95%;
--destructive: 350 50% 45%;
--destructive-foreground: 0 0% 100%;
--border: 220 15% 22%;
--input: 220 15% 20%;
--ring: 150 30% 50%;
--sidebar-background: 220 20% 14%;
--sidebar-foreground: 40 30% 95%;
--sidebar-primary: 150 30% 50%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 220 15% 20%;
--sidebar-accent-foreground: 40 30% 95%;
--sidebar-border: 220 15% 22%;
--sidebar-ring: 150 30% 50%;
}

* {
  @apply border-border;
  }

body {
@apply text-foreground;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: radial-gradient(circle at 20% 50%, hsl(150 25% 95% / 0.4) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, hsl(200 30% 92% / 0.5) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, hsl(40 35% 95% / 0.3) 0%, transparent 50%),
hsl(var(--background));
background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
}

html {
scroll-behavior: smooth;
}
}