/* Spectrum — generated from tokens.json */
:root, [data-theme="light"] {
  --ivory: #f5f1e9;
  --charcoal: #202321;
  --gold: #b49a5a;
  --stone: #ded8cc;
  --white: #ffffff;
  --gold-ink: #75602d;
  --ink-secondary: #585a53;
  --linen: #eee8dd;
  --sand: #d4caba;
  --charcoal-soft: #343a33;
  --bg: var(--ivory);
  --surface: var(--white);
  --ink: var(--charcoal);
  --ink-muted: var(--ink-secondary);
  --primary: var(--charcoal);
  --on-primary: var(--ivory);
  --line: var(--stone);
  --line-strong: #868176;
  --accent-ink: var(--gold-ink);
  --error: #a33232;
  --success: #245a86;
  --band: var(--charcoal);
  --glass-fill: rgba(250, 247, 240, 0.64);
  --glass-fill-dark: rgba(25, 29, 26, 0.66);
  --glass-edge: rgba(255, 255, 255, 0.8);
  --scrim: rgba(20, 22, 20, 0.6);
  --shadow-glass: 0 24px 64px rgba(25, 29, 26, 0.16);
  --shadow-toast: 0 12px 40px rgba(0, 0, 0, 0.14);
  --shadow-frame: 0 24px 64px rgba(32, 35, 33, 0.11);
}
[data-theme="dark"] {
  --bg: var(--charcoal);
  --surface: #2a2d2b;
  --ink: var(--ivory);
  --ink-muted: var(--stone);
  --primary: var(--ivory);
  --on-primary: var(--charcoal);
  --line: var(--ink-secondary);
  --line-strong: #7c7f78;
  --accent-ink: var(--gold);
  --error: #f09a91;
  --success: #9cc3e0;
  --band: var(--surface);
}
:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-indicator: 12px;
  --radius-glass: 20px;
  --radius-frame: 32px;
  --radius-pill: 999px;
  --hit-min: 44px;
  --control-height: 52px;
  --content-max: 1200px;
  --glass-blur: 22px;
  --motion-feedback: 140ms;
  --motion-state: 260ms;
  --motion-arrival: 760ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: Geologica, "Arial Unicode MS", Arial, sans-serif;
}
.sp-display-xl { font-family: var(--font-display); font-size: 64px; line-height: 1.08; font-weight: 500; letter-spacing: -0.025em; }
.sp-display-lg { font-family: var(--font-display); font-size: 52px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; }
.sp-display-md { font-family: var(--font-display); font-size: 38px; line-height: 1.25; font-weight: 500; }
.sp-display-sm { font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 500; }
.sp-heading { font-family: var(--font-sans); font-size: 24px; line-height: 1.35; font-weight: 500; letter-spacing: -0.02em; }
.sp-title { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; font-weight: 500; }
.sp-body { font-family: var(--font-sans); font-size: 15px; line-height: 1.75; font-weight: 400; }
.sp-small { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.sp-label { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: 0.015em; }
.sp-caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.6; font-weight: 400; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-500-web.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geologica"; src: url("fonts/Geologica-400-web.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geologica"; src: url("fonts/Geologica-500-web.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }