/* Ravelwise tokens: a copy of design/ravelwise/tokens.css (the source of truth; regenerate from tokens.json there).
   The Google Fonts @import is replaced by self-hosted fonts (the app's CSP is default-src 'self'). Fonts: SIL OFL,
   licences in fonts/. Light is default; dark via [data-theme="dark"] or the OS preference. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/geistmono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/geistmono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }


:root {
  --surface-100: #f6f3ec;
  --surface-000: #ffffff;
  --surface-200: #ede8dd;
  --ink: #16171b;
  --ink-muted: #5e5b55;
  --ink-inverse: #f6f3ec;
  --line: #ddd6c8;
  --line-strong: #8c8577;
  --marigold: #f2a93b;
  --on-marigold: #16171b;
  --marigold-soft: #fbe7c3;
  --marigold-ink: #8a5300;
  --up: #0e6b5c;
  --down: #a63f28;
  --slate: #55657d;
  --up-soft: #dcefe8;
  --down-soft: #f7e1d9;
  --channel-paid-search: #1d89e1;
  --channel-paid-social: #7b3d98;
  --channel-display: #7583bb;
  --channel-email: #1477ab;
  --channel-sms: #3c9293;
  --channel-affiliate: #645001;
  --channel-organic-search: #468003;
  --channel-organic-social: #aa428b;
  --channel-ai: #61206f;
  --channel-app: #8b8849;
  --channel-referral: #6b2e0f;
  --channel-other: #7c756d;
  --channel-direct: #48443f;
  --channel-unknown: #302d2b;
  --focus-ring: var(--marigold-ink);
  --shadow-card: 0 1px 2px rgba(22,23,27,0.06), 0 6px 20px rgba(22,23,27,0.06);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-100: #121316;
    --surface-000: #1b1d21;
    --surface-200: #0c0d0f;
    --ink: #f3efe6;
    --ink-muted: #a8a39a;
    --ink-inverse: #16171b;
    --line: #2a2c31;
    --line-strong: #6a6d75;
    --marigold: #f5b651;
    --on-marigold: #16171b;
    --marigold-soft: #3a2c14;
    --marigold-ink: #f5b651;
    --up: #4cc3a4;
    --down: #f0876b;
    --slate: #97a8c2;
  --up-soft: #12302a;
  --down-soft: #3b1e17;
  --channel-paid-search: #5c87e8;
  --channel-paid-social: #a26dbc;
  --channel-display: #bb97fe;
  --channel-email: #3aa8d3;
  --channel-sms: #a3e5ef;
  --channel-affiliate: #ae9c5b;
  --channel-organic-search: #a9da72;
  --channel-organic-social: #e477c0;
  --channel-ai: #e5aaf5;
  --channel-app: #d1deb2;
  --channel-referral: #b37646;
  --channel-other: #847f78;
  --channel-direct: #9b968e;
  --channel-unknown: #bfbab4;
    --up-soft: #12302a;
    --down-soft: #3b1e17;
    --channel-paid-search: #5c87e8;
    --channel-paid-social: #a26dbc;
    --channel-display: #bb97fe;
    --channel-email: #3aa8d3;
    --channel-sms: #a3e5ef;
    --channel-affiliate: #ae9c5b;
    --channel-organic-search: #a9da72;
    --channel-organic-social: #e477c0;
    --channel-ai: #e5aaf5;
    --channel-app: #d1deb2;
    --channel-referral: #b37646;
    --channel-other: #847f78;
    --channel-direct: #9b968e;
    --channel-unknown: #bfbab4;
    --focus-ring: var(--marigold-ink);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.5);
  }
}

:root[data-theme="dark"] {
  --surface-100: #121316;
  --surface-000: #1b1d21;
  --surface-200: #0c0d0f;
  --ink: #f3efe6;
  --ink-muted: #a8a39a;
  --ink-inverse: #16171b;
  --line: #2a2c31;
  --line-strong: #6a6d75;
  --marigold: #f5b651;
  --on-marigold: #16171b;
  --marigold-soft: #3a2c14;
  --marigold-ink: #f5b651;
  --up: #4cc3a4;
  --down: #f0876b;
  --slate: #97a8c2;
  --focus-ring: var(--marigold-ink);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.5);
}

.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 68px; font-weight: 500; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-display); font-size: 44px; line-height: 50px; font-weight: 500; letter-spacing: -0.015em; }
.headline { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; }
.title { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.figure-xl { font-family: var(--font-mono); font-size: 36px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figure { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }