/* ──────────────────────────────────────────────────────────────
   Tailwind v4 @theme — generated by designlang
   site: v0 by Vercel - Build Full-Stack Web Apps with AI
   2026-06-25T08:31:41.027Z
   Drop this above `@import "tailwindcss";`.
   ────────────────────────────────────────────────────────────── */

@import "tailwindcss";

@theme {
  --color-neutral-50: #d2d2d2;
  --color-neutral-100: #020202;
  --color-neutral-200: #222222;
  --color-neutral-300: #ffffff;
  --color-neutral-400: #f4f4f4;
  --color-neutral-500: #343434;
  --color-neutral-600: #646464;
  --color-neutral-700: #e2e2e2;
  --color-neutral-800: #959595;
  --color-background: #f4f4f4;
  --color-foreground: #000000;
  --font-sans: "GeistSans", system-ui, sans-serif;
  --font-mono: "GeistMono", ui-monospace, monospace;
  --spacing-1: 1px;
  --spacing-2: 64px;
  --spacing-3: 96px;
  --spacing-4: 108px;
  --spacing-5: 128px;
  --spacing-6: 192px;
  --spacing-7: 208px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 35px;
  --shadow-sm: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  --shadow-md: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  --shadow-lg: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 1px 0px;
  --shadow-xl: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  --animate-duration-fast: undefined;
  --animate-duration-base: undefined;
  --animate-duration-slow: undefined;
  --animate-duration-slower: undefined;
}

/* Optional base reset that maps body/heading to the extracted tokens. */
@layer base {
  html { font-family: var(--font-sans); }
  body { background-color: var(--color-background); color: var(--color-foreground, currentColor); }
}