:root {
  --color-charcoal: #0C0C0C;
  --color-charcoal-light: #141414;
  --color-charcoal-mid: #1A1A1A;
  --color-gold: #C9A84C;
  --color-gold-dim: #A08840;
  --color-gold-glow: rgba(201, 168, 76, 0.15);
  --color-ivory: #F2EDE3;
  --color-ivory-dim: rgba(242, 237, 227, 0.55);
  --color-ivory-muted: rgba(242, 237, 227, 0.35);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Syne', system-ui, sans-serif;

  --rail-width: 72px;
  --preview-width: 38vw;
  --radius: 2px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.25s var(--ease-out);
  --transition-med: 0.45s var(--ease-out);
  --transition-slow: 0.8s var(--ease-out);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --z-rail: 100;
  --z-preview: 90;
  --z-mobile: 110;
  --z-overlay: 80;
}

@media (max-width: 1024px) {
  :root {
    --preview-width: 0px;
  }
}

@media (max-width: 768px) {
  :root {
    --rail-width: 0px;
  }
}