/* StorySG tokens. Generated from tokens.json (source: the StorySG design system). Do not edit by hand. */
:root {
  --paper: #F6F1E7;
  --surface: #FFFDF8;
  --surface-sunk: #EFE7D8;
  --white: #FFFFFF;
  --ink: #2A2521;
  --ink-muted: #6B625A;
  --line: #E2D9C8;
  --line-strong: #B9AB92;
  --accent: #A63D2F;
  --accent-strong: #7E2C21;
  --accent-soft: #F3E1DB;
  --jade: #2F5D50;
  --jade-soft: #DDE9E3;
  --indigo: #4A5A7A;
  --indigo-ink: #3A4764;
  --indigo-soft: #E3E7EF;
  --indigo-line: #C9D0DE;
  --gold: #8A6D3B;
  --gold-ink: #6E5530;
  --gold-soft: #F1E8D6;
  --placeholder: #E9DFCC;
  --placeholder-strong: #C9B58F;
  --night: #1B1714;
  --night-raised: #3A3129;
  --night-line: #6B5E52;
  --scrim: rgba(42,37,33,0.55);
  --ink-glass: rgba(42,37,33,0.75);
  --whatsapp: #25A244;
  --whatsapp-ink: #1B7A32;
  --keepsake-kopi: #6B3A2E;
  --keepsake-jade: var(--jade);
  --keepsake-gold: var(--gold);
  --keepsake-indigo: #3F4E70;
  --keepsake-chilli: var(--accent);
  --keepsake-pandan: #5B7336;
  --keepsake-plum: #683D5B;
  --keepsake-ink: var(--ink);
  --medal-bronze: #8C5A2B;
  --medal-gold: #B08A2E;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-sheet: 22px;
  --radius-pill: 9999px;
  --shadow-raised: 0 1px 3px rgba(42,37,33,0.15);
  --shadow-float: 0 2px 14px rgba(42,37,33,0.12);
  --shadow-sheet: 0 -8px 30px rgba(42,37,33,0.25);
  --shadow-dialog: 0 12px 40px rgba(42,37,33,0.3);
  --shadow-fab: 0 6px 16px rgba(166,61,47,0.35);
  --shadow-book: inset 6px 0 0 rgba(0,0,0,0.12), 0 4px 10px rgba(42,37,33,0.18);
  --touch-min: 44px;
  --control-height: 48px;
  --button-height: 52px;
  --tabbar-item: 56px;
  --add-button: 60px;
  --frame-max: 840px;
  --side-menu: 232px;
  --bp-tablet: 600px;
  --bp-desktop: 1024px;
  --font-display: Fraunces, 'Noto Serif SC', Georgia, serif;
  --font-text: 'Source Sans 3', 'Noto Sans SC', system-ui, sans-serif;
}
.display-xl { font-family: var(--font-display); font-size: 34px; line-height: 1.15; font-weight: 600; }
.display-l { font-family: var(--font-display); font-size: 26px; line-height: 1.15; font-weight: 600; }
.display-m { font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 600; }
.title { font-family: var(--font-text); font-size: 17px; line-height: 1.3; font-weight: 600; }
.body { font-family: var(--font-text); font-size: 16px; line-height: 1.4; font-weight: 400; }
.reading { font-family: var(--font-text); font-size: 16px; line-height: 1.55; font-weight: 400; }
.small { font-family: var(--font-text); font-size: 15px; line-height: 1.4; font-weight: 400; }
.label { font-family: var(--font-text); font-size: 13px; line-height: 1.35; font-weight: 400; }
.eyebrow { font-family: var(--font-text); font-size: 13px; line-height: 1.35; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.caption { font-family: var(--font-text); font-size: 12px; line-height: 1.35; font-weight: 600; }
/* Breakpoints cannot be used inside @media as variables: use 600px (bp-tablet) and 1024px (bp-desktop). */