feat: include all style tokens

app/globals.css

@@ -4,6 +4,13 @@
 
 :root {
   --radius: 0.625rem;
+  --wedding-ivory: #f5f0e8;
+  --wedding-cream: #ede5d9;
+  --wedding-ink: #1d1b18;
+  --wedding-terracotta: #a65f46;
+  --wedding-olive: #3e4938;
+  --wedding-white: #faf7f1;
+  --wedding-line: rgb(166 95 70 / 0.35);
   --background: oklch(1 0 0);
   --foreground: oklch(0.129 0.042 264.695);
   --card: oklch(1 0 0);
@@ -25,6 +32,32 @@
 }
 
 @theme inline {
+  --breakpoint-wedding-layout: 56.25rem;
+  --breakpoint-wedding-phone: 37.5rem;
+  --container-wedding-content: 80rem;
+  --spacing-wedding-gutter-mobile: 1.5rem;
+  --spacing-wedding-gutter-phone: 2rem;
+  --spacing-wedding-gutter-desktop: 3rem;
+  --spacing-wedding-gutter-wide: 4rem;
+  --spacing-wedding-section: clamp(6.25rem, 10vw, 9.375rem);
+  --color-wedding-ivory: var(--wedding-ivory);
+  --color-wedding-cream: var(--wedding-cream);
+  --color-wedding-ink: var(--wedding-ink);
+  --color-wedding-terracotta: var(--wedding-terracotta);
+  --color-wedding-olive: var(--wedding-olive);
+  --color-wedding-white: var(--wedding-white);
+  --color-wedding-line: var(--wedding-line);
+  --font-wedding-display: var(--font-bodoni-moda);
+  --font-wedding-ui: var(--font-montserrat);
+  --text-wedding-hero: clamp(3.75rem, 9vw, 8.4375rem);
+  --text-wedding-page: clamp(2.875rem, 6vw, 5.125rem);
+  --text-wedding-section: clamp(2.125rem, 4vw, 3.75rem);
+  --text-wedding-medium: clamp(1.5rem, 2.5vw, 2.25rem);
+  --text-wedding-body: clamp(0.9375rem, 1.2vw, 1.125rem);
+  --text-wedding-label: 0.75rem;
+  --tracking-wedding-label: 0.18em;
+  --leading-wedding-display: 1;
+  --leading-wedding-body: 1.6;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -72,6 +105,98 @@
   --ring: oklch(0.551 0.027 264.364);
 }
 
+/* Public wedding pages opt into these aliases through .wedding-theme only. */
+.wedding-theme {
+  --background: var(--wedding-ivory);
+  --foreground: var(--wedding-ink);
+  --card: var(--wedding-ivory);
+  --card-foreground: var(--wedding-ink);
+  --popover: var(--wedding-ivory);
+  --popover-foreground: var(--wedding-ink);
+  --primary: var(--wedding-terracotta);
+  --primary-foreground: var(--wedding-white);
+  --secondary: var(--wedding-cream);
+  --secondary-foreground: var(--wedding-ink);
+  --muted: var(--wedding-cream);
+  --muted-foreground: var(--wedding-ink);
+  --accent: var(--wedding-cream);
+  --accent-foreground: var(--wedding-ink);
+  --border: var(--wedding-line);
+  --input: var(--wedding-line);
+  --ring: var(--wedding-terracotta);
+  background-color: var(--wedding-ivory);
+  color: var(--wedding-ink);
+  font-family: var(--font-montserrat), sans-serif;
+}
+
+@layer components {
+  .wedding-section-label {
+    color: var(--wedding-terracotta);
+    font-family: var(--font-montserrat), sans-serif;
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.18em;
+    line-height: 1.2;
+    text-transform: uppercase;
+  }
+
+  .wedding-display-heading {
+    font-family: var(--font-bodoni-moda), serif;
+    font-weight: 400;
+    letter-spacing: -0.035em;
+    line-height: 1;
+  }
+
+  .wedding-divider {
+    border-color: var(--wedding-line);
+  }
+
+  .wedding-primary-cta {
+    align-items: center;
+    background-color: var(--wedding-terracotta);
+    color: var(--wedding-white);
+    display: inline-flex;
+    font-family: var(--font-montserrat), sans-serif;
+    font-size: 0.75rem;
+    font-weight: 500;
+    justify-content: center;
+    letter-spacing: 0.18em;
+    min-height: 2.75rem;
+    padding: 0.75rem 1.5rem;
+    text-transform: uppercase;
+    transition: background-color 150ms ease, color 150ms ease;
+  }
+
+  .wedding-primary-cta:hover {
+    background-color: var(--wedding-olive);
+  }
+
+  .wedding-text-link {
+    color: var(--wedding-terracotta);
+    font-family: var(--font-montserrat), sans-serif;
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+}
+
+.wedding-theme :focus-visible {
+  outline: 2px solid var(--wedding-terracotta);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wedding-theme *,
+  .wedding-theme *::before,
+  .wedding-theme *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

app/invite/layout.tsx

@@ -0,0 +1,5 @@
+export default function InviteLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return <div className="wedding-theme min-h-full">{children}</div>
+}

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Bodoni_Moda, Geist, Geist_Mono, Montserrat } from "next/font/google";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -12,6 +12,21 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+const bodoniModa = Bodoni_Moda({
+  variable: "--font-bodoni-moda",
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  style: ["normal", "italic"],
+  display: "swap",
+});
+
+const montserrat = Montserrat({
+  variable: "--font-montserrat",
+  subsets: ["latin"],
+  weight: ["300", "400", "500"],
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -25,7 +40,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${geistSans.variable} ${geistMono.variable} ${bodoniModa.variable} ${montserrat.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">{children}</body>
     </html>