/* Victoria Salazar — generated from tokens.json */
/* Do not edit by hand: run `node scripts/build-tokens.mjs`. */

@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/PlayfairDisplay-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/PlayfairDisplay-Italic-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sacramento";
  src: url("../assets/fonts/Sacramento-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Comforter Brush";
  src: url("../assets/fonts/ComforterBrush-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Square Peg";
  src: url("../assets/fonts/SquarePeg-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --burgundy-950: #33101b;
  --burgundy-900: #45122a;
  --burgundy-750: #611a32;
  --burgundy-800: #561a31;
  --burgundy-700: #6e2541;
  --rose-700: #84294a;
  --rose-600: #9b3558;
  --rose-500: #b4466a;
  --pink-400: #cd8b95;
  --rose-300: #d9a5a9;
  --blush-200: #ebc4c5;
  --blush-100: #f5dcdb;
  --cream-50: #fbf4e8;
  --cream-100: #f4e9da;
  --cream-200: #eae4d8;
  --paper-deckle: #fffaf3;
  --kraft-300: #ccad90;
  --kraft-200: #d4bba3;
  --stone-400: #a29c96;
  --stone-300: #c9bfb2;
  --tape: #e9dcc3c7;
  --ink-900: #3a1521;
  --ink-950: #2b0c12;
  --ink-600: #6a4148;
  --mauve-200: #e3c3c8;
  --red-700: #a1262e;
  --green-700: #2f6150;
  --surface-paper: var(--cream-50);
  --surface-paper-alt: var(--cream-100);
  --surface-blush: var(--blush-200);
  --surface-dark: var(--burgundy-800);
  --surface-darker: var(--burgundy-900);
  --surface-deepest: var(--burgundy-950);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-display: var(--burgundy-800);
  --text-on-dark: var(--cream-50);
  --text-on-dark-muted: var(--mauve-200);
  --text-on-accent: var(--cream-50);
  --accent: var(--rose-600);
  --accent-hover: var(--rose-700);
  --accent-soft: var(--pink-400);
  --interactive: var(--burgundy-800);
  --interactive-hover: var(--burgundy-700);
  --interactive-active: var(--burgundy-950);
  --border-subtle: #3a152124;
  --border-control: #6a4148;
  --border-strong: var(--burgundy-800);
  --border-on-dark: #fbf4e852;
  --overlay-scrim: #1e0710d9;
  --overlay-play: #fbf4e8c2;
  --focus-ring: var(--rose-600);
  --focus-ring-on-dark: var(--blush-100);
  --disabled-fill: #e6dccd;
  --disabled-text: #857069;
  --dot-on-dark: #fbf4e84d;
  --dot-on-paper: #561a3124;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-paper: 0 1px 2px #33101b24, 0 3px 8px #33101b1a;
  --shadow-lift: 0 14px 28px #33101b33, 0 4px 8px #33101b1f;
  --shadow-sticker: 0 2px 0 #33101b33;
  --shadow-modal: 0 30px 80px #0d030799;

  /* Fluid type sizes */
  --fs-display-xl: clamp(3.25rem, 1.6rem + 6.4vw, 7.5rem);
  --fs-display-lg: clamp(2.9rem, 1.6rem + 4.8vw, 5.5rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 3.4vw, 4rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.6rem, 1.25rem + 1.3vw, 2.125rem);
  --fs-h4: clamp(1.35rem, 1.15rem + 0.7vw, 1.625rem);
  --fs-body-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-script-lg: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);

  /* Layout */
  --container-max: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-space: clamp(48px, 2.5rem + 3.4vw, 96px);
  --section-space-sm: clamp(32px, 1.5rem + 2vw, 56px);
  --board-max: 1998px;
  --header-height: 72px;
  --tap-min: 44px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Z-index */
  --z-paper: 0;
  --z-deco: 1;
  --z-content: 2;
  --z-sticker: 3;
  --z-header: 50;
  --z-drawer: 60;
  --z-modal: 100;

  /* Font families */
  --font-display: "Playfair Display", "Bodoni 72", Didot, Georgia, serif;
  --font-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-script: Sacramento, "Snell Roundhand", cursive;
  --font-brush: "Comforter Brush", "Brush Script MT", cursive;
  --font-hand: "Square Peg", "Segoe Print", cursive;
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: 0.92;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1;
  font-weight: 600;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.05;
  font-weight: 600;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.12;
  font-weight: 600;
}
.h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.15;
  font-weight: 500;
}
.h5 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.h6 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  font-weight: 400;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.button {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.nav {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.script-lg {
  font-family: var(--font-script);
  font-size: var(--fs-script-lg);
  line-height: 1.05;
  font-weight: 400;
}
.script-md {
  font-family: var(--font-script);
  font-size: 38px;
  line-height: 1.1;
  font-weight: 400;
}
.script-brush {
  font-family: var(--font-brush);
  font-size: 64px;
  line-height: 1;
  font-weight: 400;
}
.script-hand {
  font-family: var(--font-hand);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 400;
}