/* GENERATED by scripts/design-tokens.mjs from Figma "Design Foundations" (https://www.figma.com/design/fX6fIdFKbdfgMaBExsStkI/Design-Foundations),
   synced 2026-10-07. Do not edit: change the variable in Figma, then "sync the design tokens". */
@font-face { font-family: "EB Garamond"; src: url("/fonts/EBGaramond-Variable.woff2") format("woff2"); font-style: normal; font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/EBGaramond-Italic-Variable.woff2") format("woff2"); font-style: italic; font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/Jost-Variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }

:root {
  /* Color (Light) */
  --color-bg-primary: var(--primitive-neutral-50);
  --color-bg-sunken: var(--primitive-neutral-100);
  --color-bg-raised: var(--primitive-neutral-0);
  --color-text-primary: var(--primitive-neutral-1000);
  --color-text-body: var(--primitive-neutral-700);
  --color-text-secondary: var(--primitive-neutral-600);
  --color-text-tertiary: var(--primitive-neutral-500);
  --color-text-disabled: var(--primitive-neutral-300);
  --color-text-accent: var(--primitive-gold-700);
  --color-icon-accent: var(--primitive-gold-500);
  --color-border-subtle: var(--primitive-neutral-200);
  --color-border-strong: var(--primitive-neutral-400);
  --color-action-primary-bg: var(--primitive-neutral-1000);
  --color-action-primary-text: var(--primitive-neutral-0);
  --color-status-error: var(--primitive-status-error-light);
  --color-status-success: var(--primitive-status-success-light);
  --color-status-warning: var(--primitive-status-warning-light);
  --color-status-info: var(--primitive-status-info-light);
  --color-vibe-intimate: var(--primitive-vibe-intimate-light);
  --color-vibe-dreamy: var(--primitive-vibe-dreamy-light);
  --color-vibe-elegant: var(--primitive-vibe-elegant-light);
  --color-vibe-creative: var(--primitive-vibe-creative-light);
  --color-vibe-vibrant: var(--primitive-vibe-vibrant-light);
  --color-vibe-dramatic: var(--primitive-vibe-dramatic-light);
  --color-vibe-raw: var(--primitive-vibe-raw-light);
  --color-vibe-chill: var(--primitive-vibe-chill-light);
  --color-vibe-spiritual: var(--primitive-vibe-spiritual-light);
  --color-engage-like: var(--primitive-engage-like-light);
  --color-engage-comment: var(--primitive-engage-comment-light);
  --color-engage-share: var(--primitive-engage-share-light);
  --color-engage-save: var(--color-icon-accent);
  --color-glow-warm: var(--primitive-glow-warm-light);
  --color-material-glass-tint: var(--primitive-neutral-0);
  --color-material-glass-edge: var(--primitive-neutral-0);
  --color-material-scrim: var(--primitive-neutral-1000);
  --color-text-on-image: var(--primitive-neutral-0);
  /* Effect (Light) */
  --effect-glow-warm-opacity-text: 0.3;
  --effect-glow-vibe-opacity-text: 0.07;
  --effect-glow-opacity-no-text: 0.4;
  --effect-glass-tint-opacity: 0.6;
  --effect-glass-blur: 28px;
  --effect-glass-saturation: 85%;
  --effect-glass-edge-opacity: 0.55;
  --effect-scrim-opacity: 0.6;
  --effect-grain-opacity: 0.05;
  /* Motion (Value) */
  --motion-duration-press: 150ms;
  --motion-duration-standard: 350ms;
  --motion-duration-gentle: 700ms;
  --motion-duration-soft-focus: 900ms;
  --motion-duration-cinematic: 1000ms;
  --motion-duration-cinematic-long: 1400ms;
  --motion-duration-leave: 300ms;
  --motion-duration-cascade-step: 90ms;
  --motion-duration-glow-breathe: 10000ms;
  --motion-duration-reduced: 200ms;
  --motion-easing-arrive: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-easing-leave: cubic-bezier(0.64, 0, 0.78, 0);
  --motion-distance-rise: 16px;
  --motion-blur-soft-focus: 14px;
  --motion-scale-settle: 1.08;
  /* Primitives (Value) */
  --primitive-neutral-0: #ffffff;
  --primitive-neutral-50: #fcfbf9;
  --primitive-neutral-100: #f6f3ed;
  --primitive-neutral-200: #e4e1da;
  --primitive-neutral-300: #b8b4ae;
  --primitive-neutral-400: #8f8a83;
  --primitive-neutral-500: #726e68;
  --primitive-neutral-600: #5e5a55;
  --primitive-neutral-700: #3b3835;
  --primitive-neutral-800: #232225;
  --primitive-neutral-900: #161517;
  --primitive-neutral-1000: #000000;
  --primitive-gold-300: #c9b47a;
  --primitive-gold-400: #b19b61;
  --primitive-gold-500: #9a8040;
  --primitive-gold-700: #7a6228;
  --primitive-status-error-light: #a8173f;
  --primitive-status-error-dark: #ff8f9e;
  --primitive-status-success-light: #2f6b4a;
  --primitive-status-success-dark: #7fc49e;
  --primitive-status-warning-light: #ae5000;
  --primitive-status-warning-dark: #f59740;
  --primitive-status-info-light: #2f5d8a;
  --primitive-status-info-dark: #8db8e0;
  --primitive-vibe-intimate-light: #915a8c;
  --primitive-vibe-intimate-dark: #cf94c9;
  --primitive-vibe-dreamy-light: #7b5bb6;
  --primitive-vibe-dreamy-dark: #b393f4;
  --primitive-vibe-elegant-light: #324e76;
  --primitive-vibe-elegant-dark: #90add7;
  --primitive-vibe-creative-light: #846a02;
  --primitive-vibe-creative-dark: #ebbf09;
  --primitive-vibe-vibrant-light: #c63c07;
  --primitive-vibe-vibrant-dark: #ff885e;
  --primitive-vibe-dramatic-light: #c11435;
  --primitive-vibe-dramatic-dark: #fa4658;
  --primitive-vibe-raw-light: #846651;
  --primitive-vibe-raw-dark: #c7a38a;
  --primitive-vibe-chill-light: #556743;
  --primitive-vibe-chill-dark: #a4ba8e;
  --primitive-vibe-spiritual-light: #007772;
  --primitive-vibe-spiritual-dark: #59c5c0;
  --primitive-engage-like-light: #c33d53;
  --primitive-engage-like-dark: #e35b6d;
  --primitive-engage-comment-light: #9558a3;
  --primitive-engage-comment-dark: #b273c0;
  --primitive-engage-share-light: #007984;
  --primitive-engage-share-dark: #1d97a3;
  --primitive-glow-warm-light: #e6b877;
  --primitive-glow-warm-dark: #d6a55c;
  /* Shape (Value) */
  --radius-none: 0px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-full: 999px;
  --stroke-hairline: 1px;
  --stroke-control: 1px;
  /* Size (Value) */
  --size-icon-inline: 16px;
  --size-icon-compact: 20px;
  --size-icon-default: 24px;
  --size-icon-tab-bar: 28px;
  --size-touch-target-ios: 44px;
  --size-touch-target-android: 48px;
  --size-button-min-height: 48px;
  /* Spacing (Value) */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --layout-screen-margin: var(--space-5);
  --layout-section-gap: var(--space-8);
  --layout-overline-gap: var(--space-3);
  /* Typography (Mobile) */
  --font-family-serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-family-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --display-xl-size: 64px;
  --display-xl-line-height: 60px;
  --display-l-size: 40px;
  --display-l-line-height: 44px;
  --display-m-size: 32px;
  --display-m-line-height: 38px;
  --headline-l-size: 28px;
  --headline-l-line-height: 34px;
  --headline-m-size: 24px;
  --headline-m-line-height: 30px;
  --headline-s-size: 20px;
  --headline-s-line-height: 26px;
  --title-size: 17px;
  --title-line-height: 22px;
  --body-l-size: 17px;
  --body-l-line-height: 24px;
  --body-m-size: 15px;
  --body-m-line-height: 22px;
  --body-s-size: 13px;
  --body-s-line-height: 18px;
  --label-l-size: 15px;
  --label-l-line-height: 20px;
  --label-m-size: 13px;
  --label-m-line-height: 16px;
  --overline-size: 11px;
  --overline-line-height: 16px;
  --caption-size: 11px;
  --caption-line-height: 14px;
  /* Letter spacing of the text styles that have one */
  --type-display-xl-letter-spacing: -0.02em;
  --type-display-l-letter-spacing: -0.01em;
  --type-display-m-letter-spacing: -0.01em;
  --type-overline-letter-spacing: 0.12em;
  /* Font weights, from the Typography font styles */
  --font-weight-regular: 400;
  --font-weight-italic: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
}

/* Typography "Desktop" mode */
@media (min-width: 64rem) {
  :root {
    --display-xl-size: 96px;
    --display-xl-line-height: 88px;
    --display-l-size: 64px;
    --display-l-line-height: 68px;
    --display-m-size: 48px;
    --display-m-line-height: 54px;
    --headline-l-size: 36px;
    --headline-l-line-height: 42px;
    --headline-m-size: 30px;
    --headline-m-line-height: 36px;
    --headline-s-size: 24px;
    --headline-s-line-height: 30px;
  }
}

/* Text styles: one class per Figma text style (display/xl → .type-display-xl) */
.type-display-xl { font-family: var(--font-family-serif); font-size: var(--display-xl-size); line-height: var(--display-xl-line-height); font-weight: 400; font-style: normal; letter-spacing: var(--type-display-xl-letter-spacing); }
.type-display-l { font-family: var(--font-family-serif); font-size: var(--display-l-size); line-height: var(--display-l-line-height); font-weight: 400; font-style: normal; letter-spacing: var(--type-display-l-letter-spacing); }
.type-display-m { font-family: var(--font-family-serif); font-size: var(--display-m-size); line-height: var(--display-m-line-height); font-weight: 400; font-style: normal; letter-spacing: var(--type-display-m-letter-spacing); }
.type-headline-l { font-family: var(--font-family-serif); font-size: var(--headline-l-size); line-height: var(--headline-l-line-height); font-weight: 400; font-style: normal; }
.type-headline-m { font-family: var(--font-family-serif); font-size: var(--headline-m-size); line-height: var(--headline-m-line-height); font-weight: 400; font-style: normal; }
.type-headline-s { font-family: var(--font-family-serif); font-size: var(--headline-s-size); line-height: var(--headline-s-line-height); font-weight: 400; font-style: normal; }
.type-title { font-family: var(--font-family-serif); font-size: var(--title-size); line-height: var(--title-line-height); font-weight: 400; font-style: normal; }
.type-body-l { font-family: var(--font-family-sans); font-size: var(--body-l-size); line-height: var(--body-l-line-height); font-weight: 400; font-style: normal; }
.type-body-m { font-family: var(--font-family-sans); font-size: var(--body-m-size); line-height: var(--body-m-line-height); font-weight: 400; font-style: normal; }
.type-body-s { font-family: var(--font-family-sans); font-size: var(--body-s-size); line-height: var(--body-s-line-height); font-weight: 400; font-style: normal; }
.type-label-l { font-family: var(--font-family-sans); font-size: var(--label-l-size); line-height: var(--label-l-line-height); font-weight: 600; font-style: normal; }
.type-label-m { font-family: var(--font-family-sans); font-size: var(--label-m-size); line-height: var(--label-m-line-height); font-weight: 500; font-style: normal; }
.type-overline { font-family: var(--font-family-sans); font-size: var(--overline-size); line-height: var(--overline-line-height); font-weight: 500; font-style: normal; letter-spacing: var(--type-overline-letter-spacing); text-transform: uppercase; }
.type-caption { font-family: var(--font-family-sans); font-size: var(--caption-size); line-height: var(--caption-line-height); font-weight: 400; font-style: normal; }
.type-title-italic { font-family: var(--font-family-serif); font-size: var(--title-size); line-height: var(--title-line-height); font-weight: 400; font-style: italic; }
.type-vibe-list { font-family: var(--font-family-serif); font-size: var(--title-size); line-height: var(--title-line-height); font-weight: 400; font-style: italic; }
.type-vibe-detail { font-family: var(--font-family-serif); font-size: var(--headline-s-size); line-height: var(--headline-s-line-height); font-weight: 400; font-style: italic; }