/* GENERATED from design/tokens/spirit.tokens.json. Do not edit by hand. */
:root {
  --color-background-main: #F4F6F9;
  --color-background-cool: #E4E9F0;
  --color-background-floor: #E9EEF6;
  --color-surface-white: #FFFFFF;
  --color-surface-glass: rgba(248, 250, 252, 0.859);
  --color-surface-soft: #F2F5F9;
  --color-surface-field: #F4F7FB;
  --color-navy-primary: #0B1E46;
  --color-navy-secondary: #274C77;
  --color-text-primary: #0B1E46;
  --color-text-secondary: #56688A;
  --color-text-tertiary: #8392AA;
  --color-blue-primary: #1A7AF4;
  --color-blue-bright: #3AA8FF;
  --color-blue-deep: #0F6BEA;
  --color-blue-link: #1462F0;
  --color-blue-tint: #E8F2FE;
  --color-cyan-accent: #27C6D9;
  --color-green-accent: #5FC08A;
  --color-danger: #C4474F;
  --color-danger-tint: #FBECEC;
  --color-border-soft: rgba(20, 50, 95, 0.078);
  --color-border-strong: rgba(20, 50, 95, 0.141);
  --color-ring-line: rgba(154, 168, 189, 0.549);
  --color-ring-glow: #FFF7EA;
  --color-ring-halo: #DCEBFF;
  --color-scrim: rgba(11, 30, 70, 0.161);
  --color-text-tagline: #45546F;
  --color-icon-muted: #4D6B8D;
  --color-field-icon-surface: #F9FBFD;
  --color-panel-top: rgba(250, 251, 253, 0.902);
  --color-panel-bottom: rgba(244, 247, 251, 0.859);
  --color-panel-edge: rgba(255, 255, 255, 0.949);
  --color-background-side: rgba(205, 213, 225, 0.749);
  --color-ring-band-top: rgba(255, 255, 255, 0.949);
  --color-ring-band-mid: rgba(244, 247, 251, 0.851);
  --color-ring-band-bottom: rgba(232, 238, 246, 0.600);
  --color-ring-shade: #C3CDDA;
  --color-ring-halo-blue: #9CC6FF;
  --color-highlight-warm: #FFF6E6;
  --color-floor-line: rgba(160, 170, 186, 0.349);
  --color-floor-top: #F6F8FB;
  --color-floor-mid: #F2F5F9;
  --color-floor-bottom: #E6EEFA;
  --color-focus-ring: rgba(26, 122, 244, 0.102);
  --color-focus-border: rgba(26, 122, 244, 0.451);
  --gradient-primary-button: #3AA8FF, #1A7AF4, #0F6BEA;
  --gradient-brand: #1565F9, #27C6D9, #5FC08A;
  --gradient-outgoing-bubble: #EAF3FF, #DDEBFF;
  --gradient-background: #EEF1F6, #F7F8FA, #F2F4F8;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-x3: 40px;
  --space-x4: 48px;
  --space-x5: 64px;
  --radius-small: 12px;
  --radius-medium: 16px;
  --radius-large: 24px;
  --radius-field: 23px;
  --radius-panel: 30px;
  --radius-pill: 999px;
  --size-touch-min: 48px;
  --size-field: 46px;
  --size-button: 50px;
  --size-secondary-button: 44px;
  --size-field-icon: 32px;
  --size-card-max-width: 316px;
  --size-page-gutter: 24px;
  --size-logo-mark: 124px;
  --size-avatar: 48px;
  --size-bottom-bar: 64px;
  --size-avatar-small: 40px;
  --size-avatar-large: 72px;
  --size-bubble-max-width: 280px;
  --size-composer: 48px;
  --size-badge: 20px;
  --size-toggle-width: 46px;
  --size-toggle-height: 28px;
  --size-hairline: 1px;
  --size-header-height: 56px;
  --size-progress-mark: 44px;
  --size-qr-code: 240px;
  --size-scan-window: 260px;
  --size-header-mark: 30px;
  --shadow-panel: 0 18px 48px rgba(30, 60, 110, 0.1);
  --shadow-field: 0 3px 12px rgba(30, 60, 110, 0.05);
  --shadow-button: 0 10px 24px rgba(26, 122, 244, 0.32);
  --motion-fast: 150ms;
  --motion-standard: 220ms;
  --motion-slow: 320ms;
  --motion-breathe: 1600ms;
  --font-family: "Figtree", system-ui, sans-serif;
}
.type-wordmark { font-size: 29px; font-weight: 500; letter-spacing: 0.3em; line-height: 34px; }
.type-wordmark-sub { font-size: 12px; font-weight: 500; letter-spacing: 0.5em; line-height: 16px; }
.type-wordmark-compact { font-size: 17px; font-weight: 500; letter-spacing: 0.3em; line-height: 20px; }
.type-wordmark-compact-sub { font-size: 9.5px; font-weight: 500; letter-spacing: 0.5em; line-height: 12px; }
.type-tagline { font-size: 9.5px; font-weight: 500; letter-spacing: 0.34em; line-height: 15px; }
.type-display { font-size: 25px; font-weight: 700; letter-spacing: -0.01em; line-height: 30px; }
.type-title { font-size: 20px; font-weight: 600; letter-spacing: 0em; line-height: 26px; }
.type-body { font-size: 15px; font-weight: 400; letter-spacing: 0em; line-height: 22px; }
.type-body-medium { font-size: 15px; font-weight: 500; letter-spacing: 0em; line-height: 22px; }
.type-button { font-size: 16px; font-weight: 600; letter-spacing: 0em; line-height: 20px; }
.type-label { font-size: 13px; font-weight: 500; letter-spacing: 0em; line-height: 18px; }
.type-caption { font-size: 12px; font-weight: 400; letter-spacing: 0.02em; line-height: 16px; }
.type-body-small { font-size: 13px; font-weight: 400; letter-spacing: 0em; line-height: 18px; }
.type-field { font-size: 14px; font-weight: 400; letter-spacing: 0em; line-height: 20px; }
.type-action { font-size: 14px; font-weight: 500; letter-spacing: 0em; line-height: 20px; }