/* Riverside brand tokens. Generated from tokens.json. Light theme is the default; add data-theme="dark" to <html> for dark. */
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-latin-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
:root {
  --riverside-red: #C8202F;  /* Riverside Red: the brand. Logo, the r tile, packaging bands, primary buttons, the stencil  */
  --white: #FFFFFF;  /* White: the ground. Crisp and bright. Default page and card stock. */
  --foam-gray: #33383D;  /* Foam Gray: ink and dark bands, the colour of the foam blocks. Body text and the descriptor */
  --mist: #E9EAE7;  /* Mist: light panels, chips and photo grounds. Foam Gray text on it. */
  --river-teal: #1C8597;  /* River Teal: the accent. Stickers, promo bands, tile patterns. Never the logo. White text o */
  --river-teal-deep: #167786;  /* Deeper teal for pills and small labels with white text (5.2:1). */
  --surface: #FFFFFF;  /* Page background. */
  --surface-raised: #FFFFFF;  /* Cards and panels. */
  --surface-sunk: #E9EAE7;  /* Wells, chips, photo grounds. */
  --ink: #33383D;  /* Primary text. */
  --ink-muted: #5C6166;  /* Secondary text on surface and surface-raised (6.3:1 light; 6.3:1 on surface and 5.3:1 on s */
  --line: #DADBD7;  /* Hairlines and card borders. Not for text. */
  --line-strong: #33383D;  /* Input borders, outlined buttons, focus rings. */
  --accent: #C8202F;  /* Brand action colour: buttons, links, the stencil bar. Light red on dark grounds (5.9:1). */
  --accent-hover: #A51A27;  /* Hover and pressed accent. */
  --on-accent: #FFFFFF;  /* Text on accent: white on red, Foam Gray on light red. */
  --pop: #167786;  /* The playful accent fill for pills and tags, with white text. */
  --font-display: Fraunces, Georgia, serif;
  --font-sans: Figtree, system-ui, sans-serif;
  --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;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-tile: 20%;
  --radius-pill: 999px;
}
[data-theme="dark"] {
  --surface: #33383D;
  --surface-raised: #3E444A;
  --surface-sunk: #2A2E32;
  --ink: #F4F4F2;
  --ink-muted: #B9BEC2;
  --line: #4C535A;
  --line-strong: #F4F4F2;
  --accent: #FF9AA0;
  --accent-hover: #FFB8BC;
  --on-accent: #33383D;
}
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 0.98; font-weight: 700; letter-spacing: -0.02em; }
.display-italic { font-family: var(--font-display); font-size: 72px; line-height: 0.98; font-weight: 600; font-style: italic; letter-spacing: -0.02em; }
.headline { font-family: var(--font-display); font-size: 32px; line-height: 1.1; font-weight: 700; }
.title { font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; }
.kicker { font-family: var(--font-sans); font-size: 15px; line-height: 1.2; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 1.3; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.pill { font-family: var(--font-sans); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.body-l { font-family: var(--font-sans); font-size: 19px; line-height: 29px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 25px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.price { font-family: var(--font-sans); font-size: 22px; line-height: 1; font-weight: 600; }