:root {
  --font-sans: Georgia, 'Times New Roman', ui-serif, serif;
  --background: 42 35% 97%;
  --foreground: 30 24% 12%;
  --card: 40 32% 99%;
  --card-foreground: 30 24% 12%;
  --popover: 40 32% 99%;
  --popover-foreground: 30 24% 12%;
  --primary: 28 58% 32%;
  --primary-foreground: 42 35% 97%;
  --secondary: 38 32% 88%;
  --secondary-foreground: 30 24% 12%;
  --muted: 38 28% 91%;
  --muted-foreground: 29 14% 39%;
  --accent: 41 68% 72%;
  --accent-foreground: 30 24% 12%;
  --destructive: 0 72% 42%;
  --destructive-foreground: 42 35% 97%;
  --success: 142 55% 30%;
  --success-foreground: 42 35% 97%;
  --warning: 36 86% 38%;
  --warning-foreground: 42 35% 97%;
  --info: 207 68% 36%;
  --info-foreground: 42 35% 97%;
  --border: 34 22% 78%;
  --input: 34 22% 72%;
  --ring: 28 58% 32%;
  --radius: 0.625rem;
  --shadow-sm: 0 1px 2px hsl(var(--foreground) / 0.05);
  --shadow-md: 0 4px 12px hsl(var(--foreground) / 0.08);
  --shadow-lg: 0 12px 32px hsl(var(--foreground) / 0.12);
  --shadow-elegant: 0 18px 42px hsl(var(--primary) / 0.18);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
  --background: 28 22% 9%;
  --foreground: 42 30% 92%;
  --card: 30 20% 13%;
  --card-foreground: 42 30% 92%;
  --popover: 30 20% 13%;
  --popover-foreground: 42 30% 92%;
  --primary: 38 62% 64%;
  --primary-foreground: 28 22% 9%;
  --secondary: 31 18% 20%;
  --secondary-foreground: 42 30% 92%;
  --muted: 31 18% 18%;
  --muted-foreground: 39 16% 68%;
  --accent: 35 46% 28%;
  --accent-foreground: 42 30% 92%;
  --destructive: 0 70% 58%;
  --destructive-foreground: 28 22% 9%;
  --success: 143 50% 54%;
  --success-foreground: 28 22% 9%;
  --warning: 39 88% 62%;
  --warning-foreground: 28 22% 9%;
  --info: 205 72% 64%;
  --info-foreground: 28 22% 9%;
  --border: 31 16% 25%;
  --input: 31 16% 30%;
  --ring: 38 62% 64%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
}

body {
  margin: 0;
  min-width: 320px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

section {
  scroll-margin-top: 88px;
}

button, input, textarea, select {
  font: inherit;
}

input, textarea, select {
  font-size: max(16px, 1rem);
}

.mobile-safe-bottom {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

.hero-grid {
  background:
    radial-gradient(circle at 18% 18%, hsl(var(--accent) / 0.28), transparent 28rem),
    radial-gradient(circle at 82% 24%, hsl(var(--primary) / 0.14), transparent 24rem),
    hsl(var(--background));
}

.classic-frame::before {
  content: '';
  position: absolute;
  inset: 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  pointer-events: none;
  z-index: 1;
}

.artistic-panel {
  position: relative;
  background:
    linear-gradient(145deg, hsl(var(--primary) / 0.24), transparent 44%),
    radial-gradient(circle at 70% 18%, hsl(var(--accent) / 0.72), transparent 18rem),
    linear-gradient(180deg, hsl(var(--muted)), hsl(var(--secondary)));
}

.artistic-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, hsl(var(--foreground) / 0.06) 1px, transparent 1px), linear-gradient(hsl(var(--foreground) / 0.05) 1px, transparent 1px);
  background-size: 2rem 2rem;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 78%, transparent);
}

.project-art {
  background:
    radial-gradient(circle at 25% 25%, hsl(var(--accent) / 0.5), transparent 16rem),
    radial-gradient(circle at 75% 70%, hsl(var(--primary) / 0.22), transparent 18rem),
    linear-gradient(145deg, hsl(var(--muted)), hsl(var(--secondary)));
}

.fade-up {
  animation: fadeUp var(--transition-smooth) both;
}

.toast-enter {
  animation: toastIn var(--transition-smooth) both;
}

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

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}