/* GENERATED from @ottospace/tokens — do not edit; run packages/tokens/build.js */

:root {
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
  --control-pad-x-sm: 12px;
  --control-pad-x-md: 16px;
  --control-pad-x-lg: 20px;
  --control-gap: 8px;
  --control-focus-ring-width: 2px;
  --control-focus-ring-offset: 2px;
  --elevation-0: none;
  --elevation-1: 0 1px 2px 0 rgba(0,0,0,0.30);
  --elevation-2: 0 2px 8px -1px rgba(0,0,0,0.35);
  --elevation-3: 0 8px 24px -4px rgba(0,0,0,0.45);
  --elevation-4: 0 16px 48px -8px rgba(0,0,0,0.55);
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 320ms;
  --motion-easing-standard: cubic-bezier(0.2,0,0,1);
  --motion-easing-accelerate: cubic-bezier(0.4,0,1,1);
  --motion-easing-decelerate: cubic-bezier(0,0,0.2,1);
  --motion-mirror-reveal-duration: 320ms;
  --motion-mirror-reveal-easing: cubic-bezier(0.2,0,0,1);
  --radius-tag: 5px;
  --radius-input: 8px;
  --radius-card: 11px;
  --radius-panel: 14px;
  --radius-pill: 40px;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --font-family-display: IDGrotesk, -apple-system, sans-serif;
  --font-family-body: IDGrotesk, -apple-system, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-caption: 13px;
  --font-size-body: 16px;
  --font-size-lede: 20px;
  --font-size-h3: 28px;
  --font-size-h2: 44px;
  --font-size-h1: 72px;
  --font-size-display: 124px;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-toast: 1600;
  --z-tooltip: 1800;
  --color-bg: #0a0b0a;
  --color-bg2: #101210;
  --color-card: #141613;
  --color-card2: #1b1e19;
  --color-ink: #f4f5f1;
  --color-mut: #9ca298;
  --color-soft: #c3c6ba;
  --color-faint: #8a8f84;
  --color-line: rgba(244, 245, 241, 0.08);
  --color-line2: rgba(244, 245, 241, 0.14);
  --color-accent: #d8fe00;
  --color-accent-deep: #8fa300;
  --color-on-accent: #0a0b0a;
  --color-bone: #eae5d6;
  --color-cream: #ece7d8;
  --color-cream-ink: #15160f;
  --color-danger: #ff5b5b;
  --color-on-danger: #0a0b0a;
  --color-success: #5fd68a;
  --color-on-success: #0a0b0a;
  --color-warn: #fbbf24;
  --color-on-warn: #0a0b0a;
  --color-info: #7cc4ff;
  --color-on-info: #0a0b0a;
  --color-focus-ring: #d8fe00;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-scrim: rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] {
  --color-bg: #f7f7f2;
  --color-bg2: #eeeee8;
  --color-card: #ffffff;
  --color-card2: #f3f3ee;
  --color-ink: #15160f;
  --color-mut: #8a8f84;
  --color-soft: #3a3e36;
  --color-faint: #8a8f84;
  --color-line: rgba(21, 22, 15, 0.1);
  --color-line2: rgba(21, 22, 15, 0.16);
  --color-focus-ring: #5f7000;
  --color-overlay: rgba(21, 22, 15, 0.45);
  --color-scrim: rgba(21, 22, 15, 0.28);
}