:root {
  --vv-white: #ffffff;
  --vv-pearl: #f5f5f5;
  --vv-ink: #222222;
  --vv-black: #000000;
  --vv-mute: #8a8a8a;
  --vv-line: #efefef;
  --vv-hair: #dddddd;
  --vv-hair2: #e2e2e2;
  --vv-gold: #c9a961;

  --vh: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --header-h: 72px;
  --header-offset: calc(var(--header-h) + var(--safe-top));
  --vv-pad-x: 48px;
  --vv-pad-x-sm: 20px;
  --grid-gap: 32px;

  --ff-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-drift: ease;
  --ease-reveal: ease-out;
  --duration-fast: 160ms;
  --duration-ui: 200ms;
  --duration-modal: 300ms;
  --motion-soft: 500ms;
  --motion-reveal: 1000ms;
  --motion-slide: 1500ms;
  --motion-drift: 2500ms;
  --transition: var(--duration-ui) var(--ease-out);
}

@media (max-width: 767px) {
  :root {
    --vv-pad-x: var(--vv-pad-x-sm);
    --header-h: 60px;
  }
}