/* Two Cups — generated from tokens.json */
:root, [data-theme="day"] {
  --surface-canvas: #eee8dd;
  --surface-card: #f6f2ea;
  --surface-sunken: #d9cdb8;
  --surface-inverse: #1b1a17;
  --surface-control: #e3daca;
  --track: rgba(27,26,23,0.07);
  --ink: #1b1a17;
  --ink-muted: #5a564f;
  --on-inverse: #f6f2ea;
  --accent: #a84c25;
  --on-accent: #ffffff;
  --accent-soft: #e6a17f;
  --slate: #3e5566;
  --olive: #4f5a3a;
  --olive-soft: #e3e6da;
  --danger: #b3261e;
  --hairline: rgba(27,26,23,0.10);
  --hairline-strong: rgba(27,26,23,0.16);
  --scrim: rgba(27,26,23,0.35);
  --glass: rgba(255,255,255,0.58);
  --glass-edge: rgba(255,255,255,0.75);
  --focus: #3e5566;
  --shadow-card: 0 1px 0 rgba(27,26,23,0.10), inset 0 0 0 1px rgba(27,26,23,0.06);
  --shadow-float: 0 6px 20px rgba(27,26,23,0.12);
  --shadow-tarot: 0 1px 0 rgba(27,26,23,0.18), 0 10px 24px rgba(27,26,23,0.16);
  --shadow-sheet: 0 -8px 24px rgba(27,26,23,0.10);
}
[data-theme="night"] {
  --surface-canvas: #1b1a17;
  --surface-card: #2b241e;
  --surface-sunken: #3a2e24;
  --surface-inverse: #f3eee4;
  --surface-control: #3a2e24;
  --track: rgba(243,238,228,0.10);
  --ink: #f3eee4;
  --ink-muted: #b2aea6;
  --on-inverse: #1b1a17;
  --accent: #e6a17f;
  --on-accent: #1b1a17;
  --accent-soft: #b4532a;
  --slate: #c9d3db;
  --olive: #b7c29a;
  --olive-soft: #2f3326;
  --danger: #f28b82;
  --hairline: rgba(243,238,228,0.12);
  --hairline-strong: rgba(243,238,228,0.20);
  --scrim: rgba(0,0,0,0.55);
  --glass: rgba(43,36,30,0.62);
  --glass-edge: rgba(243,238,228,0.14);
  --focus: #c9d3db;
  --shadow-card: 0 1px 0 rgba(0,0,0,0.40), inset 0 0 0 1px rgba(243,238,228,0.06);
  --shadow-float: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-tarot: 0 1px 0 rgba(0,0,0,0.50), 0 10px 24px rgba(0,0,0,0.50);
  --shadow-sheet: 0 -8px 24px rgba(0,0,0,0.45);
}
:root {
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xs: 3px;
  --radius-s: 8px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --size-control: 44px;
  --size-button: 54px;
  --size-chip: 36px;
  --border-control: 1.5px;
  --font-display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --font-voice: "Newsreader", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
.title-1 { font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
.title-2 { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.title-3 { font-family: var(--font-display); font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.headline { font-family: var(--font-display); font-size: 17px; line-height: 21px; font-weight: 600; }
.voice-lg { font-family: var(--font-voice); font-size: 20px; line-height: 29px; font-weight: 400; }
.voice { font-family: var(--font-voice); font-size: 18px; line-height: 26px; font-weight: 400; }
.voice-aside { font-family: var(--font-voice); font-size: 16px; line-height: 22px; font-weight: 400; font-style: italic; }
.body { font-family: var(--font-ui); font-size: 17px; line-height: 22px; font-weight: 400; }
.body-strong { font-family: var(--font-ui); font-size: 17px; line-height: 22px; font-weight: 600; }
.callout { font-family: var(--font-ui); font-size: 15px; line-height: 20px; font-weight: 400; }
.subhead { font-family: var(--font-ui); font-size: 13px; line-height: 18px; font-weight: 400; }
.eyebrow { font-family: var(--font-ui); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; }
.caption { font-family: var(--font-ui); font-size: 12px; line-height: 16px; font-weight: 400; }
.micro { font-family: var(--font-ui); font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 0.04em; }