:root {
  --background: 42 24% 96%;
  --foreground: 32 18% 10%;
  --primary: 30 20% 16%;
  --primary-foreground: 42 24% 96%;
  --secondary: 37 22% 87%;
  --secondary-foreground: 32 18% 10%;
  --muted: 35 16% 78%;
  --muted-foreground: 30 8% 39%;
  --destructive: 5 72% 48%;
  --destructive-foreground: 42 24% 96%;
  --border: 32 15% 78%;
  --card: 42 26% 98%;
  --shadow-sm: 0 1px 2px hsl(32 18% 10% / 0.08);
  --shadow-md: 0 12px 30px hsl(32 18% 10% / 0.12);
  --shadow-lg: 0 26px 80px hsl(32 18% 10% / 0.24);
  --transition-fast: 160ms ease;
  --transition-smooth: 360ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
}
.dark {
  --background: 28 16% 7%;
  --foreground: 42 22% 92%;
  --primary: 42 22% 92%;
  --primary-foreground: 28 16% 7%;
  --secondary: 28 12% 16%;
  --secondary-foreground: 42 22% 92%;
  --muted: 28 8% 25%;
  --muted-foreground: 42 10% 67%;
  --destructive: 4 75% 58%;
  --destructive-foreground: 28 16% 7%;
  --border: 28 10% 24%;
  --card: 28 14% 10%;
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.26);
  --shadow-md: 0 12px 34px hsl(0 0% 0% / 0.34);
  --shadow-lg: 0 30px 90px hsl(0 0% 0% / 0.55);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem); }
img { max-width: 100%; display: block; }
.bg-1 { background: hsl(var(--background)); }
.bg-2 { background: hsl(var(--card)); }
.bg-3 { background: hsl(var(--secondary)); }
.bg-4 { background: hsl(var(--muted)); }
.text-primary { color: hsl(var(--foreground)); }
.text-secondary { color: hsl(var(--muted-foreground)); }
.text-tertiary { color: hsl(var(--muted-foreground) / .76); }
.accent { color: hsl(var(--primary)); }
.focus-ring:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }
.masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; column-gap: 1.25rem; } }
.masonry-item { break-inside: avoid; margin-bottom: 1rem; }
@media (min-width: 1024px) { .masonry-item { margin-bottom: 1.25rem; } }
.fade-in { animation: fadeIn .32s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.lightbox-img { animation: imageFade .28s ease both; }
@keyframes imageFade { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
.safe-bottom { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
.safe-top { padding-top: env(safe-area-inset-top); }