/* Versta v1 tokens — generated from design/tokens.json. Edit the JSON, not this file. */
:root, [data-theme="light"] {
  --paper: #f7f1e6;
  --paper-raised: #fffaf2;
  --paper-sunken: #efe6d6;
  --line: #e6dccb;
  --line-strong: #8c8375;
  --ink: #2a2622;
  --ink-muted: #6b645c;
  --ink-faint: #8c8375;
  --sky: #3d5d8c;
  --on-sky: #fbf7ef;
  --sky-soft: #dbe5f1;
  --on-sky-soft: #274470;
  --focus: #3d5d8c;
  --sand: #f1e2c4;
  --apricot: #f4cfae;
  --rose: #f0d3d6;
  --coral-ink: #ad3f33;
  --coral-fill: #fbe0da;
  --sunflower-ink: #8a5a05;
  --sunflower-fill: #fbeac2;
  --mint-ink: #1b7050;
  --mint-fill: #d9f1e5;
  --lilac-ink: #5b4fb3;
  --lilac-fill: #e8e3f8;
  --teal-ink: #1f6f7a;
  --teal-fill: #d6eef0;
  --race-suggested: #ece4d6;
  --race-suggested-ink: #6b645c;
  --race-interest: #dbe5f1;
  --race-interest-ink: #274470;
  --race-subscribed: #fbeac2;
  --race-subscribed-ink: #8a5a05;
  --race-favourite: #fbe0da;
  --race-favourite-ink: #ad3f33;
  --race-registered: #d9f1e5;
  --race-registered-ink: #1b7050;
  --shadow-soft: 0 1px 2px rgba(42,38,34,0.04), 0 6px 16px rgba(42,38,34,0.07);
  --shadow-pop: 0 12px 32px rgba(42,38,34,0.12), 0 2px 4px rgba(42,38,34,0.06);
  --wash-apricot: radial-gradient(ellipse at 80% 10%, #f8dcc0 0%, #f7f1e6 55%);
  --wash-sky: radial-gradient(ellipse at 15% 90%, #e5ebf3 0%, #fbf7ef 55%);
}
[data-theme="dark"] {
  --paper: #1e1b1f;
  --paper-raised: #2a2530;
  --paper-sunken: #171519;
  --line: #3a3340;
  --line-strong: #776e80;
  --ink: #f3ece2;
  --ink-muted: #c9bfb4;
  --ink-faint: #8a8290;
  --sky: #a3bde2;
  --on-sky: #0f1a2b;
  --sky-soft: #223044;
  --on-sky-soft: #bccfec;
  --focus: #a3bde2;
  --sand: #3b3320;
  --apricot: #3f2b1f;
  --rose: #3a2630;
  --coral-ink: #ff9a8c;
  --coral-fill: #4a2420;
  --sunflower-ink: #f2c35a;
  --sunflower-fill: #3f3010;
  --mint-ink: #8fe0bb;
  --mint-fill: #163626;
  --lilac-ink: #c3b8f5;
  --lilac-fill: #2b2545;
  --teal-ink: #7fd0da;
  --teal-fill: #153238;
  --race-suggested: #2d2832;
  --race-suggested-ink: #b8b0a6;
  --race-interest: #223044;
  --race-interest-ink: #bccfec;
  --race-subscribed: #3f3010;
  --race-subscribed-ink: #f2c35a;
  --race-favourite: #4a2420;
  --race-favourite-ink: #ff9a8c;
  --race-registered: #163626;
  --race-registered-ink: #8fe0bb;
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.3), 0 6px 16px rgba(0,0,0,0.4);
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
  --wash-apricot: radial-gradient(ellipse at 85% 15%, #3a2f3a 0%, #1e1b1f 60%);
  --wash-sky: radial-gradient(ellipse at 15% 90%, #243044 0%, #1e1b1f 60%);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 999px;
  --border-hair: 1px;
  --border-ring: 2px;
  --font-sans: Onest, "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.display { font-family: var(--font-sans); font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -0.02em; }
.title { font-family: var(--font-sans); font-size: 26px; line-height: 33px; font-weight: 600; letter-spacing: -0.01em; }
.wordmark { font-family: var(--font-sans); font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.big-number { font-family: var(--font-sans); font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -0.02em; }
.eyebrow { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.heading { font-family: var(--font-sans); font-size: 18px; line-height: 25px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 23px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 15px; line-height: 23px; font-weight: 600; }
.small { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.time { font-family: var(--font-mono); font-size: 13px; line-height: 19px; font-weight: 500; }
.distance { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }