/* Tokens mapped 1:1 from the Figma native variables in
   https://www.figma.com/design/BYlbnKOjyGrx1xD0RUFjFe
   Names follow the WEB code syntax set on each variable. */

:root {
  /* Primitives */
  --wedding-cream-50: #FFF8F1;
  --wedding-cream-100: #FAEDDD;
  --wedding-cream-200: #F0D9C3;
  --wedding-blush-100: #FFCCDE;
  --wedding-rose-500: #F78FB2;
  --wedding-burgundy-700: #A63959;
  --wedding-burgundy-900: #76243E;
  --wedding-sage-600: #757E5F;
  --wedding-olive-400: #C1C394;
  --wedding-ink-900: #2C2527;
  --wedding-white-1000: #FFFFFF;
  --wedding-overlay-70: rgba(44, 37, 39, 0.7);

  /* Semantic color aliases */
  --wedding-color-bg-canvas: var(--wedding-cream-100);
  --wedding-color-bg-surface: var(--wedding-cream-50);
  --wedding-color-bg-accent: var(--wedding-burgundy-700);
  --wedding-color-bg-accent-strong: var(--wedding-burgundy-900);
  --wedding-color-text-primary: var(--wedding-ink-900);
  --wedding-color-text-secondary: var(--wedding-sage-600);
  --wedding-color-text-accent: var(--wedding-burgundy-700);
  --wedding-color-text-on-accent: var(--wedding-white-1000);
  --wedding-color-border-subtle: var(--wedding-cream-200);
  --wedding-color-border-accent: var(--wedding-burgundy-700);
  --wedding-color-icon-accent: var(--wedding-burgundy-700);
  --wedding-color-action-primary-bg: var(--wedding-burgundy-700);
  --wedding-color-action-primary-text: var(--wedding-white-1000);
  --wedding-color-action-secondary-bg: var(--wedding-cream-50);
  --wedding-color-action-secondary-text: var(--wedding-burgundy-700);
  --wedding-color-focus-ring: var(--wedding-rose-500);

  /* Dimensions */
  --wedding-spacing-0: 0px;
  --wedding-spacing-2xs: 4px;
  --wedding-spacing-xs: 8px;
  --wedding-spacing-sm: 12px;
  --wedding-spacing-md: 16px;
  --wedding-spacing-lg: 24px;
  --wedding-spacing-xl: 32px;
  --wedding-spacing-2xl: 48px;
  --wedding-spacing-3xl: 64px;
  --wedding-spacing-4xl: 96px;
  --wedding-spacing-5xl: 128px;
  --wedding-radius-none: 0px;
  --wedding-radius-xs: 2px;
  --wedding-radius-sm: 4px;
  --wedding-radius-md: 8px;
  --wedding-radius-full: 999px;
  --wedding-size-touch-target: 44px;
  --wedding-size-content-max: 1120px;

  /* Typography tokens */
  --wedding-family-display: "Monsieur La Doulaise", cursive;
  --wedding-family-serif: "Cormorant Garamond", Georgia, serif;
  --wedding-family-sans: "Source Sans 3", system-ui, sans-serif;
  --wedding-size-label: 12px;
  --wedding-size-body: 16px;
  --wedding-size-body-large: 18px;
  --wedding-size-heading-3: 24px;
  --wedding-size-heading-2: 36px;
  --wedding-size-heading-1: 48px;
  --wedding-size-display: 72px;
}

/* Text styles (Figma text style composites) */
.type-display-monogram {
  font-family: var(--wedding-family-display);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.6px;
}

.type-display-names {
  font-family: var(--wedding-family-display);
  font-size: var(--wedding-size-display);
  line-height: 82px;
  letter-spacing: 0;
}

.type-h1 {
  font-family: var(--wedding-family-serif);
  font-weight: 400;
  font-size: var(--wedding-size-heading-1);
  line-height: 56px;
}

.type-h2 {
  font-family: var(--wedding-family-serif);
  font-weight: 500;
  font-size: var(--wedding-size-heading-2);
  line-height: 44px;
}

.type-h3 {
  font-family: var(--wedding-family-serif);
  font-weight: 500;
  font-size: var(--wedding-size-heading-3);
  line-height: 32px;
}

.type-body-large {
  font-family: var(--wedding-family-sans);
  font-weight: 400;
  font-size: var(--wedding-size-body-large);
  line-height: 28px;
}

.type-body-medium {
  font-family: var(--wedding-family-sans);
  font-weight: 400;
  font-size: var(--wedding-size-body);
  line-height: 24px;
}

.type-body-small {
  font-family: var(--wedding-family-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.type-label-default {
  font-family: var(--wedding-family-sans);
  font-weight: 600;
  font-size: var(--wedding-size-label);
  line-height: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.type-label-small {
  font-family: var(--wedding-family-sans);
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Effect styles */
.shadow-subtle { box-shadow: 0 2px 8px rgba(44, 37, 39, 0.08); }
.shadow-modal { box-shadow: 0 16px 40px -8px rgba(44, 37, 39, 0.18); }