/* Design Tokens exported from Stitch */

:root {
  /* Colors - Zinc/Greyscale */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;

  /* Typography Families */
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Playfair Display', serif;

  /* Spacings (based on Tailwind scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-20: 5rem;
  --space-32: 8rem;
  --space-40: 10rem;

  --layout-px-mobile: 1.5rem;
  --layout-px-desktop: 3rem;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-slow: 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--color-white);
  color: var(--color-zinc-900);
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }
.uppercase { text-transform: uppercase; }