/* Dark mode (default) */
:root {
  --color-bg: #0c0b0f;
  --color-surface: #16151a;
  --color-surface-2: #1e1d23;
  --color-text: #eae8e4;
  --color-text-dim: #9a9690;
  --color-text-muted: #5c5955;
  --color-accent: #c8a46e;
  --color-accent-light: #dfc295;
  --color-accent-dim: rgba(200, 164, 110, 0.12);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.1);
  --color-avail: #7ec98a;
  --color-avail-bg: rgba(126, 201, 138, 0.08);
  --color-avail-border: rgba(126, 201, 138, 0.15);
  --grain-opacity: 0.035;
  --photo-brightness: 0.95;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --max-width: 860px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light mode */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f7f5f2;
    --color-surface: #ffffff;
    --color-surface-2: #edeae6;
    --color-text: #1a1815;
    --color-text-dim: #5c5850;
    --color-text-muted: #9a958c;
    --color-accent: #9a7b42;
    --color-accent-light: #7a6234;
    --color-accent-dim: rgba(154, 123, 66, 0.08);
    --color-border: rgba(0, 0, 0, 0.07);
    --color-border-strong: rgba(0, 0, 0, 0.12);
    --color-avail: #2d8a3e;
    --color-avail-bg: rgba(45, 138, 62, 0.07);
    --color-avail-border: rgba(45, 138, 62, 0.18);
    --grain-opacity: 0.02;
    --photo-brightness: 1;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--color-accent-light);
}

/* Film grain overlay */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.anim-fade.visible {
  opacity: 1;
  transform: translateY(0);
}