/* caboodle — generated from tokens.json by `caboodle-design build`. Do not edit. */

@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-v2.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme='dark'] {
  color-scheme: dark;
  --bg: #06070e;
  --bg-glow: #0e0c22;
  --surface: #0e0f1c;
  --surface-raised: #171829;
  --glass: #12132299;
  --field: #090a15;
  --scrim: #04050acc;
  --stage: #8d8ba5;
  --checker: #7f7d97;
  --line: #edebff1a;
  --line-strong: #706e8e;
  --ink: #edebff;
  --ink-muted: #a6a4c0;
  --ink-faint: #6f6d8c;
  --placeholder: #8a88a6;
  --primary: var(--ink);
  --primary-hover: #ffffff;
  --on-primary: #06070e;
  --peach: #ffd3b0;
  --peach-soft: #ffd3b026;
  --rose: #ffb8d9;
  --rose-soft: #ffb8d926;
  --lilac: #c9b8ff;
  --lilac-soft: #c9b8ff26;
  --peri: #a8c5ff;
  --peri-soft: #a8c5ff26;
  --aqua: #a6f0e1;
  --aqua-soft: #a6f0e126;
  --accent: var(--lilac);
  --accent-soft: var(--lilac-soft);
  --on-accent: #06070e;
  --success: #9be27f;
  --success-soft: #9be27f24;
  --info: var(--ink-muted);
  --info-soft: var(--line);
  --warning: #ffd88a;
  --warning-soft: #ffd88a24;
  --danger: #ff7d73;
  --danger-soft: #ff7d7324;
  --link: var(--accent);
  --shadow-1: inset 0 1px 0 0 #edebff0f, 0 8px 24px -12px #000000a6;
  --shadow-2: inset 0 1px 0 0 #edebff17, 0 16px 48px -16px #000000b8;
  --shadow-3: inset 0 1px 0 0 #edebff17, 0 32px 80px -24px #000000cc;
  --focus-ring: 0 0 0 2px #06070e, 0 0 0 4px #c9b8ff;
  --glow-accent: 0 0 0 1px #c9b8ff40, 0 10px 36px -10px #c9b8ff66;
}

[data-theme='light'] {
  color-scheme: light;
  --bg: #f5f4fa;
  --bg-glow: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --glass: #ffffffb8;
  --field: #f5f4fa;
  --scrim: #15141f66;
  --stage: #8d8ba5;
  --checker: #7f7d97;
  --line: #15141f17;
  --line-strong: #8b89a3;
  --ink: #15141f;
  --ink-muted: #55536b;
  --ink-faint: #9a98b0;
  --placeholder: #6b6982;
  --primary: var(--ink);
  --primary-hover: #2b2a3a;
  --on-primary: #ffffff;
  --peach: #a14a12;
  --peach-soft: #ffe9d8;
  --rose: #ad2f6b;
  --rose-soft: #ffe4f0;
  --lilac: #5b42c6;
  --lilac-soft: #ece6ff;
  --peri: #2b5bbd;
  --peri-soft: #e2ebff;
  --aqua: #0a7362;
  --aqua-soft: #d8f5ee;
  --accent: var(--lilac);
  --accent-soft: var(--lilac-soft);
  --on-accent: #ffffff;
  --success: #2f7a1f;
  --success-soft: #e5f4dc;
  --info: var(--ink-muted);
  --info-soft: var(--line);
  --warning: #8a5300;
  --warning-soft: #fff1d6;
  --danger: #b42318;
  --danger-soft: #ffe4e0;
  --link: var(--accent);
  --shadow-1: 0 1px 2px 0 #15142010, 0 8px 24px -12px #15142030;
  --shadow-2: 0 2px 6px 0 #15142014, 0 16px 48px -16px #15142042;
  --shadow-3: 0 4px 12px 0 #1514201a, 0 32px 80px -24px #1514204d;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #5b42c6;
  --glow-accent: 0 0 0 1px #5b42c633, 0 10px 36px -10px #5b42c64d;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f5f4fa;
    --bg-glow: #ffffff;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --glass: #ffffffb8;
    --field: #f5f4fa;
    --scrim: #15141f66;
    --stage: #8d8ba5;
    --checker: #7f7d97;
    --line: #15141f17;
    --line-strong: #8b89a3;
    --ink: #15141f;
    --ink-muted: #55536b;
    --ink-faint: #9a98b0;
    --placeholder: #6b6982;
    --primary: var(--ink);
    --primary-hover: #2b2a3a;
    --on-primary: #ffffff;
    --peach: #a14a12;
    --peach-soft: #ffe9d8;
    --rose: #ad2f6b;
    --rose-soft: #ffe4f0;
    --lilac: #5b42c6;
    --lilac-soft: #ece6ff;
    --peri: #2b5bbd;
    --peri-soft: #e2ebff;
    --aqua: #0a7362;
    --aqua-soft: #d8f5ee;
    --accent: var(--lilac);
    --accent-soft: var(--lilac-soft);
    --on-accent: #ffffff;
    --success: #2f7a1f;
    --success-soft: #e5f4dc;
    --info: var(--ink-muted);
    --info-soft: var(--line);
    --warning: #8a5300;
    --warning-soft: #fff1d6;
    --danger: #b42318;
    --danger-soft: #ffe4e0;
    --link: var(--accent);
    --shadow-1: 0 1px 2px 0 #15142010, 0 8px 24px -12px #15142030;
    --shadow-2: 0 2px 6px 0 #15142014, 0 16px 48px -16px #15142042;
    --shadow-3: 0 4px 12px 0 #1514201a, 0 32px 80px -24px #1514204d;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #5b42c6;
    --glow-accent: 0 0 0 1px #5b42c633, 0 10px 36px -10px #5b42c64d;
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 999px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-touch: 44px;
  --toolbar: 56px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --stage-max: 320px;
  --stage-max-compact: 240px;
  --duration-instant: 120ms;
  --duration-quick: 200ms;
  --duration-settle: 420ms;
  --duration-shift: 1200ms;
  --duration-drift: 24s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --blur-glass: 24px;
  --width-narrow: 560px;
  --width-text: 720px;
  --width-wide: 1080px;
  --opacity-disabled: 0.4;
  --z-sticky: 10;
  --z-overlay: 40;
  --z-toast: 50;
  --z-tooltip: 60;
  --bp-compact: 560px;
  --bp-split: 680px;
  --font-sans: Outfit, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

.display {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.title-1 {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.title-2 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.title-3 {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.headline {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.callout {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}

.footnote {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.whisper {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.mono {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}