/*
 * Layer order. The hand-written site styles live in `site` so Tailwind utilities
 * (used by shadcn-style components in src/components/ui) win over them, while the
 * site still looks exactly as before. Tailwind's preflight reset is left out on
 * purpose: site.css already provides the base element styles.
 */
@layer theme, base, site, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);
@import './site.css' layer(site);
@import './vip.css' layer(site);

/* site.css owns these class names; don't let same-named Tailwind utilities override them. */
@source not inline("container table");

/* shadcn/ui tokens, mapped onto the site's own design tokens (dark mode follows automatically). */
@theme inline {
  --color-background: var(--bg);
  --color-foreground: var(--ink);
  --color-card: var(--surface);
  --color-card-foreground: var(--ink);
  --color-popover: var(--surface);
  --color-popover-foreground: var(--ink);
  --color-primary: var(--accent);
  --color-primary-foreground: var(--accent-ink);
  --color-secondary: var(--surface-2);
  --color-secondary-foreground: var(--ink);
  --color-muted: var(--surface-2);
  --color-muted-foreground: var(--muted);
  --color-accent: var(--accent-soft);
  --color-accent-foreground: var(--ink);
  --color-destructive: var(--danger);
  --color-border: var(--line);
  --color-input: var(--line);
  --color-ring: var(--focus);
  --color-brand: var(--accent-bright);
  --color-cream: #e1e0cc;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-sans: var(--body);
  --font-serif: var(--display);
}

@layer components {
  /* Film-grain texture used over hero video. */
  .noise-overlay {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }
}