/* generated from tokens/tokens.json by scripts/build-tokens.mjs. don't edit by hand. */
:root {
  --color-sand-1: #fdfdfc;
  --color-sand-2: #f9f9f8;
  --color-sand-3: #f1f0ef;
  --color-sand-4: #e9e8e6;
  --color-sand-5: #e2e1de;
  --color-sand-6: #dad9d6;
  --color-sand-7: #cfceca;
  --color-sand-8: #bcbbb5;
  --color-sand-9: #8d8d86;
  --color-sand-10: #82827c;
  --color-sand-11: #63635e;
  --color-sand-12: #21201c;
  --color-sand-dark-1: #111110;
  --color-sand-dark-2: #191918;
  --color-sand-dark-3: #222221;
  --color-sand-dark-4: #2a2a28;
  --color-sand-dark-5: #31312e;
  --color-sand-dark-6: #3b3a37;
  --color-sand-dark-7: #494844;
  --color-sand-dark-8: #62605b;
  --color-sand-dark-9: #6f6d66;
  --color-sand-dark-10: #7c7b74;
  --color-sand-dark-11: #b5b3ad;
  --color-sand-dark-12: #eeeeec;
  --color-white: #ffffff;
  --color-yellow: oklch(0.92 0.16 98);
  --color-yellow-dark: oklch(0.86 0.15 96);
  --color-blue: oklch(0.62 0.17 255);
  --color-blue-dark: oklch(0.74 0.13 255);
  --color-salmon: oklch(0.72 0.14 32);
  --color-salmon-dark: oklch(0.68 0.13 32);
  --color-gray-1: #fcfcfc;
  --color-gray-2: #f9f9f9;
  --color-gray-3: #f0f0f0;
  --color-gray-4: #e8e8e8;
  --color-gray-5: #e0e0e0;
  --color-gray-6: #d9d9d9;
  --color-gray-7: #cecece;
  --color-gray-8: #bbbbbb;
  --color-gray-9: #8d8d8d;
  --color-gray-10: #838383;
  --color-gray-11: #646464;
  --color-gray-12: #202020;
  --color-gray-dark-1: #111111;
  --color-gray-dark-2: #191919;
  --color-gray-dark-3: #222222;
  --color-gray-dark-4: #2a2a2a;
  --color-gray-dark-5: #313131;
  --color-gray-dark-6: #3a3a3a;
  --color-gray-dark-7: #484848;
  --color-gray-dark-8: #606060;
  --color-gray-dark-9: #6e6e6e;
  --color-gray-dark-10: #7b7b7b;
  --color-gray-dark-11: #b4b4b4;
  --color-gray-dark-12: #eeeeee;
  --color-slate-1: #fcfcfd;
  --color-slate-2: #f9f9fb;
  --color-slate-3: #f0f0f3;
  --color-slate-4: #e8e8ec;
  --color-slate-5: #e0e1e6;
  --color-slate-6: #d9d9e0;
  --color-slate-7: #cdced6;
  --color-slate-8: #b9bbc6;
  --color-slate-9: #8b8d98;
  --color-slate-10: #80838d;
  --color-slate-11: #60646c;
  --color-slate-12: #1c2024;
  --color-slate-dark-1: #111113;
  --color-slate-dark-2: #18191b;
  --color-slate-dark-3: #212225;
  --color-slate-dark-4: #272a2d;
  --color-slate-dark-5: #2e3135;
  --color-slate-dark-6: #363a3f;
  --color-slate-dark-7: #43484e;
  --color-slate-dark-8: #5a6169;
  --color-slate-dark-9: #696e77;
  --color-slate-dark-10: #777b84;
  --color-slate-dark-11: #b0b4ba;
  --color-slate-dark-12: #edeef0;
  --typeface-sans: Inter, system-ui, sans-serif;
  --typeface-mono: "Geist Mono", ui-monospace, monospace;
  --typeface-hand: "Nothing You Could Do", "Segoe Print", cursive;
  --size-12: 0.75rem;
  --size-13: 0.8125rem;
  --size-14: 0.875rem;
  --size-16: 1rem;
  --size-18: 1.125rem;
  --size-22: 1.375rem;
  --size-32: 2rem;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-full: 999px;
  --spring-smooth-ease: linear(0, 0.049, 0.089, 0.135, 0.184, 0.235, 0.286, 0.336, 0.385, 0.432, 0.476, 0.519, 0.558, 0.595, 0.63, 0.662, 0.691, 0.719, 0.744, 0.767, 0.788, 0.807, 0.825, 0.841, 0.856, 0.869, 0.881, 0.892, 0.902, 0.911, 0.92, 0.927, 0.934, 0.94, 0.946, 0.951, 0.956, 0.96, 0.964, 0.967, 0.97, 0.973, 0.976, 0.978, 0.98, 0.982, 0.984, 0.985, 0.987, 0.988, 0.989, 0.99, 0.991, 0.992, 0.993, 0.993, 0.994, 0.995, 0.995, 0.996, 0.996, 0.996, 0.997, 0.997, 0.997, 0.998, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 1);
  --spring-smooth-duration: 650ms;
  --spring-snappy-ease: linear(0, 0.094, 0.17, 0.256, 0.347, 0.437, 0.524, 0.606, 0.681, 0.749, 0.808, 0.859, 0.903, 0.938, 0.967, 0.99, 1.008, 1.021, 1.03, 1.035, 1.038, 1.039, 1.039, 1.037, 1.034, 1.031, 1.027, 1.024, 1.02, 1.017, 1.014, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1.001, 1, 0.999, 0.999, 0.999, 0.999, 0.998, 0.998, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 1, 1, 1, 1, 1);
  --spring-snappy-duration: 475ms;
  --spring-bouncy-ease: linear(0, 0.141, 0.312, 0.507, 0.702, 0.878, 1.021, 1.127, 1.194, 1.226, 1.227, 1.206, 1.17, 1.126, 1.081, 1.039, 1.004, 0.977, 0.959, 0.95, 0.947, 0.951, 0.958, 0.968, 0.978, 0.988, 0.997, 1.004, 1.008, 1.011, 1.012, 1.012, 1.01, 1.008, 1.006, 1.003, 1.001, 1, 0.998, 0.998, 0.997, 0.997, 0.998, 0.998, 0.999, 0.999, 1, 1, 1, 1.001, 1);
  --spring-bouncy-duration: 833ms;
  --ease-snappy-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-quick-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-swift-out: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-overshoot-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --font-body: var(--typeface-sans);
  --font-display: var(--typeface-sans);
  --font-mono: var(--typeface-mono);
  --text-caption: var(--size-13);
  --text-label: var(--size-14);
  --text-body: var(--size-16);
  --text-lead: var(--size-18);
  --text-title: var(--size-22);
  --text-display: var(--size-32);
  --radius-badge: var(--radius-6);
  --radius-control: var(--radius-8);
  --radius-card: var(--radius-12);
  --font-hand: var(--typeface-hand);
  --motion-ease: var(--spring-smooth-ease);
  --motion-duration: var(--spring-smooth-duration);
  --motion-ease-snappy: var(--spring-snappy-ease);
  --motion-duration-snappy: var(--spring-snappy-duration);
  --motion-ease-bouncy: var(--spring-bouncy-ease);
  --motion-duration-bouncy: var(--spring-bouncy-duration);
  --font-heading: var(--typeface-sans);
  --heading-weight: 900;
  --heading-case: uppercase;
  --heading-tracking: -0.01em;
  --text-heading: 2.5rem;
  --bg-page: var(--color-sand-1);
  --bg-surface: var(--color-white);
  --bg-subtle: var(--color-sand-2);
  --bg-hover: var(--color-sand-3);
  --bg-inverse: var(--color-sand-12);
  --border-subtle: var(--color-sand-4);
  --border-strong: var(--color-sand-6);
  --text-primary: var(--color-sand-12);
  --text-secondary: var(--color-sand-11);
  --text-tertiary: var(--color-sand-10);
  --text-inverse: var(--color-sand-1);
  --accent: var(--color-sand-12);
  --accent-text: var(--color-sand-1);
  --highlight: var(--color-yellow);
  --focus-ring: var(--color-sand-8);
  --guide: var(--color-blue);
  --selection: var(--color-sand-5);
  --strike: var(--color-salmon);
  --heading-color: var(--color-sand-9);
  --highlight-text: var(--color-sand-12);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: var(--color-sand-dark-1);
    --bg-surface: var(--color-sand-dark-3);
    --bg-subtle: var(--color-sand-dark-2);
    --bg-hover: var(--color-sand-dark-4);
    --bg-inverse: var(--color-sand-dark-12);
    --border-subtle: var(--color-sand-dark-5);
    --border-strong: var(--color-sand-dark-7);
    --text-primary: var(--color-white);
    --text-secondary: var(--color-sand-dark-12);
    --text-tertiary: var(--color-sand-dark-11);
    --text-inverse: var(--color-sand-dark-1);
    --accent: var(--color-sand-dark-12);
    --accent-text: var(--color-sand-dark-1);
    --highlight: var(--color-yellow-dark);
    --focus-ring: var(--color-sand-dark-8);
    --guide: var(--color-blue-dark);
    --selection: var(--color-sand-dark-6);
    --strike: var(--color-salmon-dark);
    --heading-color: var(--color-white);
    --highlight-text: var(--color-sand-dark-1);
    color-scheme: dark;
  }
}
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg-page: var(--color-sand-dark-1);
  --bg-surface: var(--color-sand-dark-3);
  --bg-subtle: var(--color-sand-dark-2);
  --bg-hover: var(--color-sand-dark-4);
  --bg-inverse: var(--color-sand-dark-12);
  --border-subtle: var(--color-sand-dark-5);
  --border-strong: var(--color-sand-dark-7);
  --text-primary: var(--color-white);
  --text-secondary: var(--color-sand-dark-12);
  --text-tertiary: var(--color-sand-dark-11);
  --text-inverse: var(--color-sand-dark-1);
  --accent: var(--color-sand-dark-12);
  --accent-text: var(--color-sand-dark-1);
  --highlight: var(--color-yellow-dark);
  --focus-ring: var(--color-sand-dark-8);
  --guide: var(--color-blue-dark);
  --selection: var(--color-sand-dark-6);
  --strike: var(--color-salmon-dark);
  --heading-color: var(--color-white);
  --highlight-text: var(--color-sand-dark-1);
  color-scheme: dark;
}
/* any element can force a theme for what's inside it, like a light card shown in a dark page */
[data-theme="light"]:not(:root) {
  --bg-page: var(--color-sand-1);
  --bg-surface: var(--color-white);
  --bg-subtle: var(--color-sand-2);
  --bg-hover: var(--color-sand-3);
  --bg-inverse: var(--color-sand-12);
  --border-subtle: var(--color-sand-4);
  --border-strong: var(--color-sand-6);
  --text-primary: var(--color-sand-12);
  --text-secondary: var(--color-sand-11);
  --text-tertiary: var(--color-sand-10);
  --text-inverse: var(--color-sand-1);
  --accent: var(--color-sand-12);
  --accent-text: var(--color-sand-1);
  --highlight: var(--color-yellow);
  --focus-ring: var(--color-sand-8);
  --guide: var(--color-blue);
  --selection: var(--color-sand-5);
  --strike: var(--color-salmon);
  --heading-color: var(--color-sand-9);
  --highlight-text: var(--color-sand-12);
  color-scheme: light;
}