/* Strix token layer 3/7 — @theme.
 * Generated by scripts/build-tokens.mjs from scripts/tokens/upstream-snapshot.css.
 * Do not edit by hand — change the generator or the snapshot. `pnpm tokens:check` gates this.
 *
 * The Tailwind v4 token surface: every utility Strix generates comes from a
 * declaration here. Color values point into palette.css; dark.css re-declares
 * every semantic colour that varies by theme, and dark is the only theme.
 */

@theme {
  /* font families (spec 6.5) */
  --font-sans: "Whitney SSm", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Whitney SSm", ui-sans-serif, sans-serif;
  --font-mono: "Twilio Sans Mono", ui-monospace, SFMono-Regular, monospace;

  /* breakpoints (spec 6.4) */
  --breakpoint-sm: 481px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1344px;
  --breakpoint-2xl: 1600px;

  /* semantic color — surface */
  --color-surface-accent-extra-soft: var(--palette-primary-100);
  --color-surface-accent-extra-strong: var(--palette-primary-700);
  --color-surface-accent-medium: var(--palette-primary-400);
  --color-surface-accent-semi-extra-soft: var(--palette-primary-065);
  --color-surface-accent-soft: var(--palette-primary-200);
  --color-surface-accent-strong: var(--palette-primary-600);
  --color-surface-accent-ultra-soft: var(--palette-primary-060);
  --color-surface-alpha-black-200: var(--palette-alpha-black-alpha-200);
  --color-surface-alpha-blue-080: var(--palette-alpha-blue-alpha-080);
  --color-surface-alpha-blue-200: var(--palette-alpha-blue-alpha-200);
  --color-surface-alpha-page-bg-l0-l1: var(--palette-white-100);
  --color-surface-alpha-white-100: var(--palette-alpha-white-alpha-100);
  --color-surface-alpha-white-200: var(--palette-alpha-white-alpha-200);
  --color-surface-alpha-white-300: var(--palette-alpha-white-alpha-300);
  --color-surface-alpha-white-400: var(--palette-alpha-white-alpha-400);
  --color-surface-base: var(--palette-white-100);
  --color-surface-disabled: var(--palette-neutrals-100);
  --color-surface-error: var(--palette-tertiary-100);
  --color-surface-error-disabled: var(--palette-tertiary-100);
  --color-surface-error-focused: var(--palette-tertiary-200);
  --color-surface-error-hover: var(--palette-tertiary-200);
  --color-surface-error-pressed: var(--palette-tertiary-300);
  --color-surface-error-soft: var(--palette-tertiary-050);
  --color-surface-hover: var(--palette-secondary-050);
  --color-surface-inactive: var(--palette-neutrals-200);
  --color-surface-inactive-disabled: var(--palette-neutrals-100);
  --color-surface-inactive-focused: var(--palette-neutrals-400);
  --color-surface-inactive-hover: var(--palette-neutrals-400);
  --color-surface-inactive-pressed: var(--palette-neutrals-500);
  --color-surface-info: var(--palette-secondary-200);
  --color-surface-inverse: var(--palette-secondary-900);
  --color-surface-neutral-medium: var(--palette-secondary-300);
  --color-surface-neutral-neutral: var(--palette-secondary-200);
  --color-surface-neutral-neutral-disabled: var(--palette-secondary-050);
  --color-surface-neutral-neutral-focused: var(--palette-secondary-300);
  --color-surface-neutral-neutral-hover: var(--palette-secondary-300);
  --color-surface-neutral-neutral-pressed: var(--palette-secondary-400);
  --color-surface-neutral-semi-medium: var(--palette-secondary-100);
  --color-surface-neutral-semi-medium-strong: var(--palette-secondary-200);
  --color-surface-neutral-semi-strong: var(--palette-secondary-400);
  --color-surface-neutral-soft: var(--palette-secondary-050);
  --color-surface-neutral-strong: var(--palette-secondary-700);
  --color-surface-pressed: var(--palette-secondary-100);
  --color-surface-primary: var(--palette-neutrals-050);
  --color-surface-secondary: var(--palette-secondary-100);
  --color-surface-selection-layer-soft: var(--palette-alpha-blue-alpha-080);
  --color-surface-selection-layer-strong: var(--palette-white-100);
  --color-surface-skeleton: var(--palette-neutrals-100);
  --color-surface-success: var(--palette-accent-mint-100);
  --color-surface-success-disabled: var(--palette-accent-mint-050);
  --color-surface-success-focus: var(--palette-accent-mint-200);
  --color-surface-success-hover: var(--palette-accent-mint-200);
  --color-surface-success-medium: var(--palette-accent-mint-300);
  --color-surface-success-pressed: var(--palette-accent-mint-300);
  --color-surface-success-semi-strong: var(--palette-accent-mint-400);
  --color-surface-success-soft: var(--palette-accent-mint-200);
  --color-surface-tertiary: var(--palette-neutrals-300);
  --color-surface-variant: var(--palette-secondary-200);
  --color-surface-warning: var(--palette-accent-sun-100);
  --color-surface-warning-disabled: var(--palette-accent-sun-100);
  --color-surface-warning-focused: var(--palette-accent-sun-200);
  --color-surface-warning-hover: var(--palette-accent-sun-200);
  --color-surface-warning-pressed: var(--palette-accent-sun-300);
  --color-surface-warning-soft: var(--palette-accent-sun-100);
  --color-surface-badge-error: var(--palette-alpha-accesible-red-alpha-200);
  --color-surface-field: var(--palette-gray-800);
  --color-surface-field-disabled: var(--palette-gray-850);
  --color-surface-tooltip: var(--palette-brand-white);
  --color-surface-tile-hover: var(--palette-alpha-twilio-red-alpha-200);
  --color-surface-bubble-user: var(--palette-gray-50);
  --color-surface-chat-visitor: var(--palette-gray-50);
  --color-surface-bubble-agent: var(--palette-gray-800);
  --color-surface-card-inverted: var(--palette-brand-white);
  --color-surface-card-arrow-active: var(--palette-brand-accesible-red-dark-theme);
  --color-surface-chat-error: var(--palette-red-600);
  --color-surface-chat-banner: var(--palette-brand-white);
  --color-surface-chat-success: var(--palette-blue-100);
  --color-surface-identity-chip: var(--palette-gray-850);
  --color-surface-avatar-pill: var(--palette-brand-ink);
  --color-surface-panel: var(--palette-gray-850);
  --color-surface-call-decline: var(--palette-red-600);
  --color-surface-call-declined: var(--palette-red-700);
  --color-surface-call-accept: var(--palette-blue-500);
  --color-surface-call-end: var(--palette-brand-accesible-red-dark-theme);
  --color-surface-call-end-hover: var(--palette-red-600);
  --color-surface-identity-disc: var(--palette-brand-white);
  --color-surface-transcript-header: var(--palette-gray-800);
  --color-surface-scrollbar-thumb: var(--palette-gray-700);

  /* semantic color — text */
  --color-text-accent: var(--palette-primary-700);
  --color-text-accent-focused: var(--palette-primary-800);
  --color-text-accent-hover: var(--palette-primary-800);
  --color-text-accent-pressed: var(--palette-primary-900);
  --color-text-accent-selected: var(--palette-primary-800);
  --color-text-accent-soft: var(--palette-primary-200);
  --color-text-accent-strong: var(--palette-primary-800);
  --color-text-badge: var(--palette-secondary-700);
  --color-text-badge-success: var(--palette-accent-mint-700);
  --color-text-button-loading: var(--palette-secondary-600);
  --color-text-button-primary: var(--palette-white-100);
  --color-text-button-primary-disabled: var(--palette-white-100);
  --color-text-button-secondary: var(--palette-primary-700);
  --color-text-button-secondary-disabled: var(--palette-neutrals-400);
  --color-text-button-secondary-disabled-on-surface: var(--palette-neutrals-600);
  --color-text-button-secondary-focused: var(--palette-primary-800);
  --color-text-button-secondary-focused-on-surface: var(--palette-secondary-900);
  --color-text-button-secondary-hover: var(--palette-primary-800);
  --color-text-button-secondary-hover-on-surface: var(--palette-secondary-900);
  --color-text-button-secondary-on-surface: var(--palette-secondary-800);
  --color-text-button-secondary-pressed: var(--palette-primary-900);
  --color-text-button-secondary-pressed-on-surface: var(--palette-secondary-900);
  --color-text-button-tertiary: var(--palette-primary-700);
  --color-text-button-tertiary-disabled: var(--palette-neutrals-400);
  --color-text-button-tertiary-focused: var(--palette-primary-800);
  --color-text-button-tertiary-hover: var(--palette-primary-800);
  --color-text-button-tertiary-pressed: var(--palette-primary-900);
  --color-text-destructive: var(--palette-tertiary-700);
  --color-text-destructive-disabled: var(--palette-tertiary-200);
  --color-text-destructive-focused: var(--palette-tertiary-800);
  --color-text-destructive-hover: var(--palette-tertiary-800);
  --color-text-destructive-pressed: var(--palette-tertiary-900);
  --color-text-disabled: var(--palette-neutrals-400);
  --color-text-disabled-on-surface: var(--palette-neutrals-500);
  --color-text-error: var(--palette-tertiary-700);
  --color-text-error-disabled: var(--palette-tertiary-200);
  --color-text-error-focused: var(--palette-tertiary-800);
  --color-text-error-hover: var(--palette-tertiary-800);
  --color-text-error-pressed: var(--palette-tertiary-900);
  --color-text-inactive: var(--palette-neutrals-700);
  --color-text-inactive-disabled: var(--palette-neutrals-400);
  --color-text-inactive-focused: var(--palette-neutrals-800);
  --color-text-inactive-hover: var(--palette-neutrals-800);
  --color-text-inactive-pressed: var(--palette-neutrals-900);
  --color-text-input-default: var(--palette-secondary-400);
  --color-text-inverse: var(--palette-white-100);
  --color-text-on-error: var(--palette-tertiary-700);
  --color-text-on-error-subtle: var(--palette-tertiary-700);
  --color-text-primary: var(--palette-secondary-900);
  --color-text-quaternary: var(--palette-secondary-400);
  --color-text-secondary: var(--palette-secondary-700);
  --color-text-success: var(--palette-accent-mint-700);
  --color-text-success-strong: var(--palette-accent-mint-800);
  --color-text-tertiary: var(--palette-secondary-600);
  --color-text-warning-disabled: var(--palette-accent-sun-200);
  --color-text-badge-on-accent: var(--palette-secondary-900);
  --color-text-button-outline: var(--palette-brand-ink);
  --color-text-button-outline-hover: var(--palette-brand-white);
  --color-text-button-link-pressed: var(--palette-blue-700);
  --color-text-button-outline-pressed: var(--palette-brand-white);
  --color-text-muted-figma: var(--palette-gray-400);
  --color-text-field-description: var(--palette-gray-300);
  --color-text-field-alert: var(--palette-brand-accesible-red-dark-theme);
  --color-text-on-tooltip: var(--palette-brand-ink);
  --color-text-on-tooltip-muted: var(--palette-gray-700);
  --color-text-subtle-figma: var(--palette-gray-300);
  --color-text-brand: var(--palette-brand-twilio-red);
  --color-text-twilio-red: var(--palette-brand-twilio-red);
  --color-text-on-bubble-user: var(--palette-brand-ink);
  --color-text-on-chat-visitor: var(--palette-brand-ink);
  --color-text-on-bubble-agent: var(--palette-brand-white);
  --color-text-section-title: var(--palette-gray-100);
  --color-text-tile-group-disabled: var(--palette-gray-700);
  --color-text-on-card-inverted: var(--palette-brand-ink);
  --color-text-on-card-inverted-muted: var(--palette-gray-700);
  --color-text-on-chat-banner: var(--palette-brand-ink);
  --color-text-transcript-agent: var(--palette-red-400);
  --color-text-notification-success: var(--palette-status-green);
  --color-text-notification-warning: var(--palette-status-amber);
  --color-text-notification-error: var(--palette-brand-accesible-red-dark-theme);

  /* semantic color — border */
  --color-border-accent: var(--palette-primary-700);
  --color-border-accent-soft: var(--palette-primary-200);
  --color-border-button-button-secondary: var(--palette-primary-700);
  --color-border-button-button-secondary-disabled: var(--palette-neutrals-400);
  --color-border-button-button-secondary-disabled-on-surface: var(--palette-neutrals-400);
  --color-border-button-button-secondary-focused: var(--palette-primary-800);
  --color-border-button-button-secondary-focused-on-surface: var(--palette-secondary-900);
  --color-border-button-button-secondary-hover: var(--palette-primary-800);
  --color-border-button-button-secondary-hover-on-surface: var(--palette-secondary-900);
  --color-border-button-button-secondary-on-surface: var(--palette-secondary-800);
  --color-border-button-button-secondary-pressed: var(--palette-primary-900);
  --color-border-button-button-secondary-pressed-on-surface: var(--palette-secondary-900);
  --color-border-button-button-tertiary: var(--palette-primary-800);
  --color-border-button-button-tertiary-focused: var(--palette-primary-800);
  --color-border-button-button-tertiary-pressed: var(--palette-primary-900);
  --color-border-button-secondary-loading: var(--palette-secondary-500);
  --color-border-card-card-primary: var(--palette-primary-100);
  --color-border-card-card-primary-disabled: var(--palette-neutrals-400);
  --color-border-card-card-primary-focused: var(--palette-primary-800);
  --color-border-card-card-primary-hover: var(--palette-primary-800);
  --color-border-card-card-primary-pressed: var(--palette-primary-800);
  --color-border-destructive: var(--palette-tertiary-700);
  --color-border-destructive-disabled: var(--palette-tertiary-200);
  --color-border-destructive-focused: var(--palette-tertiary-800);
  --color-border-destructive-hover: var(--palette-tertiary-800);
  --color-border-destructive-pressed: var(--palette-tertiary-900);
  --color-border-disabled: var(--palette-neutrals-400);
  --color-border-disabled-on-surface: var(--palette-neutrals-200);
  --color-border-divider-on-surface: var(--palette-secondary-200);
  --color-border-error: var(--palette-tertiary-700);
  --color-border-error-disabled: var(--palette-tertiary-200);
  --color-border-error-focused: var(--palette-tertiary-800);
  --color-border-error-hover: var(--palette-tertiary-800);
  --color-border-error-pressed: var(--palette-tertiary-900);
  --color-border-error-soft: var(--palette-tertiary-200);
  --color-border-focus: var(--palette-primary-800);
  --color-border-hover: var(--palette-primary-800);
  --color-border-inactive: var(--palette-neutrals-300);
  --color-border-inactive-disabled: var(--palette-neutrals-200);
  --color-border-inactive-focused: var(--palette-neutrals-600);
  --color-border-inactive-hover: var(--palette-neutrals-600);
  --color-border-inactive-pressed: var(--palette-neutrals-700);
  --color-border-inverse: var(--palette-white-100);
  --color-border-neutral-extra-soft: var(--palette-secondary-100);
  --color-border-neutral-medium: var(--palette-secondary-300);
  --color-border-neutral-neutral: var(--palette-secondary-300);
  --color-border-neutral-neutral-disabled: var(--palette-secondary-200);
  --color-border-neutral-neutral-focused: var(--palette-secondary-500);
  --color-border-neutral-neutral-hover: var(--palette-secondary-500);
  --color-border-neutral-neutral-pressed: var(--palette-secondary-600);
  --color-border-neutral-semi-strong: var(--palette-secondary-400);
  --color-border-neutral-soft: var(--palette-secondary-200);
  --color-border-neutral-strong: var(--palette-secondary-700);
  --color-border-pressed: var(--palette-primary-900);
  --color-border-skeleton: var(--palette-neutrals-700);
  --color-border-success: var(--palette-accent-mint-300);
  --color-border-success-disabled: var(--palette-accent-mint-100);
  --color-border-success-focus: var(--palette-accent-mint-600);
  --color-border-success-hover: var(--palette-accent-mint-600);
  --color-border-success-medium: var(--palette-accent-mint-300);
  --color-border-success-pressed: var(--palette-accent-mint-700);
  --color-border-tab-active: var(--palette-primary-700);
  --color-border-tertiary: var(--palette-neutrals-300);
  --color-border-warning: var(--palette-accent-sun-900);
  --color-border-warning-disabled: var(--palette-accent-sun-200);
  --color-border-warning-focused: var(--palette-accent-sun-800);
  --color-border-warning-hover: var(--palette-accent-sun-800);
  --color-border-warning-pressed: var(--palette-accent-sun-900);
  --color-border-warning-semi-medium: var(--palette-accent-sun-300);
  --color-border-control: var(--palette-secondary-600);
  --color-border-button-outline: var(--palette-brand-ink);
  --color-border-button-outline-pressed: var(--palette-gray-800);
  --color-border-field-figma: var(--palette-gray-700);
  --color-border-field-focus: var(--palette-blue-200);
  --color-border-field-error: var(--palette-brand-accesible-red-dark-theme);
  --color-border-otp-cell: var(--palette-gray-300);
  --color-border-otp-cell-filled: var(--palette-brand-white);
  --color-border-tab: var(--palette-gray-700);
  --color-border-tab-hover: var(--palette-brand-white);
  --color-border-tile: var(--palette-gray-700);
  --color-border-tile-selected: var(--palette-brand-accesible-red-dark-theme);
  --color-border-chat-input: var(--palette-brand-white);
  --color-border-tile-group-disabled: var(--palette-gray-800);
  --color-border-phone-active: var(--palette-blue-700);
  --color-border-phone-ended: var(--palette-gray-700);
  --color-border-chat-error: var(--palette-red-850);
  --color-border-chat-info: var(--palette-blue-400);
  --color-border-chat-response: var(--palette-blue-600);
  --color-border-chat-success: var(--palette-blue-400);
  --color-border-transfer-rule: var(--palette-red-850);
  --color-border-panel: var(--palette-gray-700);
  --color-border-phone-voice: var(--palette-gray-700);
  --color-border-transcript-header: var(--palette-gray-700);
  --color-border-notification-success: var(--palette-status-green);
  --color-border-notification-warning: var(--palette-status-amber);
  --color-border-notification-error: var(--palette-brand-accesible-red-dark-theme);

  /* semantic color — icon */
  --color-icon-accent: var(--palette-primary-700);
  --color-icon-accent-extra-soft: var(--palette-primary-300);
  --color-icon-accent-focused: var(--palette-primary-800);
  --color-icon-accent-hover: var(--palette-primary-800);
  --color-icon-accent-muted: var(--palette-primary-065);
  --color-icon-accent-pressed: var(--palette-primary-900);
  --color-icon-accent-selected: var(--palette-primary-800);
  --color-icon-accent-soft: var(--palette-primary-500);
  --color-icon-accent-subtle: var(--palette-primary-700);
  --color-icon-badge: var(--palette-secondary-700);
  --color-icon-badge-success: var(--palette-accent-mint-700);
  --color-icon-destructive: var(--palette-tertiary-700);
  --color-icon-destructive-disabled: var(--palette-tertiary-200);
  --color-icon-destructive-focused: var(--palette-tertiary-800);
  --color-icon-destructive-hover: var(--palette-tertiary-800);
  --color-icon-destructive-pressed: var(--palette-tertiary-900);
  --color-icon-disabled: var(--palette-neutrals-400);
  --color-icon-error: var(--palette-tertiary-700);
  --color-icon-error-disabled: var(--palette-tertiary-200);
  --color-icon-error-focused: var(--palette-tertiary-800);
  --color-icon-error-hover: var(--palette-tertiary-800);
  --color-icon-error-pressed: var(--palette-tertiary-900);
  --color-icon-inactive: var(--palette-neutrals-700);
  --color-icon-inactive-disabled: var(--palette-neutrals-400);
  --color-icon-inactive-focused: var(--palette-neutrals-800);
  --color-icon-inactive-hover: var(--palette-neutrals-800);
  --color-icon-inactive-pressed: var(--palette-neutrals-900);
  --color-icon-inverse: var(--palette-white-100);
  --color-icon-loading: var(--palette-secondary-500);
  --color-icon-on-surface: var(--palette-alpha-black-alpha-300);
  --color-icon-primary: var(--palette-secondary-900);
  --color-icon-primary-button: var(--palette-white-100);
  --color-icon-primary-button-disabled: var(--palette-white-100);
  --color-icon-secondary: var(--palette-secondary-700);
  --color-icon-skeleton: var(--palette-neutrals-700);
  --color-icon-success: var(--palette-accent-mint-700);
  --color-icon-success-soft: var(--palette-accent-mint-600);
  --color-icon-tertiary: var(--palette-secondary-600);
  --color-icon-warning: var(--palette-accent-sun-900);
  --color-icon-warning-disabled: var(--palette-accent-sun-200);
  --color-icon-field-info: var(--palette-gray-300);
  --color-icon-section: var(--palette-brand-twilio-red);
  --color-icon-brand: var(--palette-brand-twilio-red);
  --color-icon-twilio-red: var(--palette-brand-twilio-red);
  --color-icon-on-card-inverted: var(--palette-brand-ink);
  --color-icon-loading-figma: var(--palette-brand-twilio-red);
  --color-icon-chat-info: var(--palette-blue-400);
  --color-icon-chat-response: var(--palette-blue-600);
  --color-icon-waveform-agent: var(--palette-brand-accesible-red-dark-theme);
  --color-icon-waveform-transferred: var(--palette-blue-700);
  --color-icon-on-call-action: var(--palette-brand-white);
  --color-icon-notification-success: var(--palette-status-green);
  --color-icon-notification-warning: var(--palette-status-amber);
  --color-icon-notification-error: var(--palette-brand-twilio-red);

  /* semantic color — button background */
  --color-bg-button-destructive: var(--palette-tertiary-700);
  --color-bg-button-destructive-disabled: var(--palette-tertiary-200);
  --color-bg-button-destructive-focused: var(--palette-tertiary-800);
  --color-bg-button-destructive-hover: var(--palette-tertiary-800);
  --color-bg-button-destructive-pressed: var(--palette-tertiary-900);
  --color-bg-button-inverse: var(--palette-white-100);
  --color-bg-button-primary: var(--palette-primary-700);
  --color-bg-button-primary-disabled: var(--palette-neutrals-400);
  --color-bg-button-primary-focused: var(--palette-primary-800);
  --color-bg-button-primary-hover: var(--palette-primary-800);
  --color-bg-button-primary-loading: var(--palette-neutrals-050);
  --color-bg-button-primary-pressed: var(--palette-primary-900);
  --color-bg-button-secondary: var(--palette-white-100);
  --color-bg-button-outline-hover: var(--palette-brand-ink);
  --color-bg-button-outline-pressed: var(--palette-gray-800);

  /* semantic color — elevation */
  --color-elevation-elevation-040: var(--palette-alpha-white-alpha-050);
  --color-elevation-elevation-080: var(--palette-alpha-white-alpha-080);
  --color-elevation-elevation-100: var(--palette-alpha-white-alpha-100);

  /* palette-backed ramps referenced directly by v1 primitives */
  --color-accent-lavender-200: var(--palette-accent-lavender-200);
  --color-accent-lime-200: var(--palette-accent-lime-200);
  --color-accent-mint-500: var(--palette-accent-mint-500);
  --color-accent-sky-100: var(--palette-accent-sky-100);
  --color-accent-sky-025: var(--palette-accent-sky-025);
  --color-accent-sun-200: var(--palette-accent-sun-200);
  --color-accent-sun-900: var(--palette-accent-sun-900);
  --color-alpha-black-alpha-200: var(--palette-alpha-black-alpha-200);
  --color-alpha-black-alpha-700: var(--palette-alpha-black-alpha-700);
  --color-white-100: var(--palette-white-100);
  --color-highlight: var(--palette-highlight);
  --color-danger-strong: var(--palette-danger-strong);
  --color-code-1: var(--palette-metallic-pink);
  --color-code-2: var(--palette-pale-violet);
  --color-code-3: var(--palette-chinese-blue);
  --color-code-4: var(--palette-tomato);
  --color-code-5: var(--palette-azureish-white);
  --color-code-6: var(--palette-lavender-blue);
  --color-code-7: var(--palette-picton-blue);
  --color-code-8: var(--palette-gold-crayola);

  /* gradients */
  --gradients-blue-balance: linear-gradient(91deg, #1152c2 12.1%, #1866ee 72.49%);
  --gradients-skeleton-loader: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  --gradients-white-surface-fade-right: linear-gradient(90deg, #ffffff 82.34%, rgba(255, 255, 255, 0) 92.81%);
  --gradients-blue-primary: linear-gradient(180deg, #000d25 43.38%, #3f7ff3 83.79%, #deebff 114.54%);
  --gradients-blue-secondary: linear-gradient(326deg, #1866ee -74%, #51a9e3 116.08%);
  --gradients-blue-tertiary: conic-gradient(
    from 190deg at 111.64% -40.21%,
    #51a9e3 0deg,
    #3f7ff3 63.14121186733246deg,
    #51a9e3 360deg
  );
  --gradients-blue-quaternary: radial-gradient(
    146.82% 184% at 98.47% 3.5%,
    #9ec1fd 0%,
    #7facfa 27.66%,
    #3f7ff3 60%,
    #1866ee 99.99%
  );
  --gradients-blue-card-active: linear-gradient(334deg, #7facfa -7.23%, #bed6ff 38.7%, #c9f2e0 83.76%);
  --gradients-white-primary: radial-gradient(123.88% 111.73% at 100% 0%, #f1f5ff 50%, #ffffff 100%);
  --gradients-mint-active: radial-gradient(50% 50% at 50% 50%, #5f96f7 48%, #8ee4c1 100%);
  --gradients-mint-primary: linear-gradient(326deg, #1866ee -74%, #6addb2 116.08%);
  --gradients-mint-secondary: linear-gradient(115deg, #5f96f7 15.7%, #51a9e3 29.34%, #6addb2 92.46%);
  --gradients-lime-primary: linear-gradient(326deg, #1866ee -74%, #ebf08c 116.08%);
  --gradients-lavender-primary: linear-gradient(326deg, #1866ee -74%, #eebbff 116.08%);
  --gradients-white-on-surface: linear-gradient(180deg, #deebff00 -11.96%, #deebff4d 56.5%);
  --gradients-surface-fade: linear-gradient(180deg, #ffffff 64.59%, #ffffff00 112.67%);
  --gradients-surface-fade-up: linear-gradient(180deg, #ffffff00 4.38%, #ffffff 37.68%);
  --gradients-surface-fade-right: linear-gradient(90deg, #ffffff 82.34%, rgba(255, 255, 255, 0.1) 92.81%);
  --gradients-surface-fade-left: linear-gradient(270deg, #ffffff 83.83%, rgba(255, 255, 255, 0.1) 96.45%);
  --gradients-surface-fade-left-and-right: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    #ffffff 16.67%,
    #ffffff 83.33%,
    rgba(255, 255, 255, 0.1) 100%
  );
  --gradients-page-l0l1-bg: radial-gradient(24.85% 50% at 0% 88.59%, #7facfa3d 0%, #9ec1fd05 80%, #9ec1fd00 100%),
    radial-gradient(18.1% 36.42% at 86.42% 50.02%, #deebff3d 0%, #9ec1fd05 80%, #9ec1fd00 100%),
    linear-gradient(180deg, #deebff00 -11.96%, #deebff52 56.5%);
  --gradients-page-l2-bg: linear-gradient(180deg, #deebff00 20.01%, #deebff51 50.02%);
  --gradients-page-scroll: linear-gradient(0deg, #ffffff 60%, rgba(255, 255, 255, 0.3) 80%, #ffffff00 100%);
  --gradients-dev-view-surface: linear-gradient(180deg, #232e47 -10.07%, #000000 116.64%);
  --gradients-phone-mobile: linear-gradient(180deg, #000d25 50%, rgba(0, 13, 37, 0) 100%);

  /* radius */
  --radius-lg: 24px;
  --radius-lg-sm: 14px;
  --radius-md: 16px;
  --radius-med-sm: 12px;
  --radius-med-xs: 6px;
  --radius-sm: 8px;
  --radius-xl: 32px;
  --radius-xs: 4px;
  --radius-xxl: 40px;
  --radius-xxs: 2px;
  --radius-xxxl: 48px;
  --radius-small: 2px;
  --radius-medium: 4px;
  --radius-large: 10px;
  --radius-extra-large: 20px;
  --radius-2x-large: 50px;

  /* spacing */
  --spacing-borders-lg: 2px;
  --spacing-borders-md: 1.5px;
  --spacing-borders-sm: 1px;
  --spacing-borders-xl: 4px;
  --spacing-borders-xxl: 6px;
  --spacing-gap-100: 4px;
  --spacing-gap-150: 6px;
  --spacing-gap-200: 8px;
  --spacing-gap-250: 12px;
  --spacing-gap-300: 16px;
  --spacing-gap-400: 24px;
  --spacing-gap-500: 32px;
  --spacing-gap-600: 40px;
  --spacing-gap-700: 48px;
  --spacing-gap-800: 56px;
  --spacing-gap-900: 64px;
  --spacing-gap-1000: 72px;
  --spacing-gap-1300: 114px;
  --spacing-gap-050: 2px;
  --spacing-padding-horizontal-lg: 24px;
  --spacing-padding-horizontal-md: 16px;
  --spacing-padding-horizontal-med-sm: 12px;
  --spacing-padding-horizontal-sm: 8px;
  --spacing-padding-horizontal-xl: 32px;
  --spacing-padding-horizontal-xs: 4px;
  --spacing-padding-horizontal-xxl: 32px;
  --spacing-padding-horizontal-xxs: 2px;
  --spacing-padding-horizontal-xxxl: 48px;
  --spacing-padding-horizontal-xxxs: 1px;
  --spacing-padding-vertical-3xl: 48px;
  --spacing-padding-vertical-4xl: 56px;
  --spacing-padding-vertical-5xl: 64px;
  --spacing-padding-vertical-6xl: 72px;
  --spacing-padding-vertical-7xl: 80px;
  --spacing-padding-vertical-lg: 24px;
  --spacing-padding-vertical-md: 16px;
  --spacing-padding-vertical-med-sm: 12px;
  --spacing-padding-vertical-sm: 8px;
  --spacing-padding-vertical-xl: 32px;
  --spacing-padding-vertical-xs: 4px;
  --spacing-padding-vertical-xxl: 40px;
  --spacing-padding-vertical-xxs: 2px;
  --spacing-padding-vertical-xxxs: 1px;
  --spacing-borders-focus-otp: 3px;
  --spacing-touch-target: 44px;
  --spacing-touch-target-sm: 40px;
  --spacing-safe-top: env(safe-area-inset-top, 0px);
  --spacing-safe-right: env(safe-area-inset-right, 0px);
  --spacing-safe-bottom: env(safe-area-inset-bottom, 0px);
  --spacing-safe-left: env(safe-area-inset-left, 0px);
  --spacing-2x-small: 8px;
  --spacing-extra-small: 12px;
  --spacing-small: 16px;
  --spacing-medium-small: 24px;
  --spacing-medium: 32px;
  --spacing-medium-large: 48px;
  --spacing-large: 64px;
  --spacing-extra-large: 96px;
  --spacing-2x-large: 128px;
  --spacing-borders-thin: 1px;
  --spacing-borders-medium: 2px;
  --spacing-borders-bold: 4px;

  /* typography — size */
  --text-size-body-large: 1.375rem;
  --text-size-body-medium: 1rem;
  --text-size-body-small: 0.875rem;
  --text-size-body-xsmall: 0.75rem;
  --text-size-cta-medium-xsmall: 0.75rem;
  --text-size-cta-regular-large: 1.5rem;
  --text-size-cta-regular-medium: 1rem;
  --text-size-cta-regular-small: 0.875rem;
  --text-size-cta-strong-large: 1.5rem;
  --text-size-cta-strong-medium: 1rem;
  --text-size-cta-strong-small: 0.875rem;
  --text-size-d1: 3.5rem;
  --text-size-d2: 2.75rem;
  --text-size-d3: 2.125rem;
  --text-size-d4: 2rem;
  --text-size-d5: 1.875rem;
  --text-size-d6: 1.375rem;
  --text-size-d7: 1.125rem;
  --text-size-eyebrow-large: 1rem;
  --text-size-eyebrow-small: 0.875rem;
  --text-size-h1: 2.5rem;
  --text-size-h2: 2.25rem;
  --text-size-h3: 2rem;
  --text-size-h4: 1.625rem;
  --text-size-h5: 1.25rem;
  --text-size-h6: 1.125rem;
  --text-size-h7: 1rem;
  --text-size-mono-large: 1rem;
  --text-size-mono-medium: 0.875rem;
  --text-size-mono-small: 0.75rem;
  --text-size-subhead-large: 1.875rem;
  --text-size-subhead-medium: 1.375rem;
  --text-size-subhead-small: 1.25rem;
  --text-size-figma-12: 12px;
  --text-size-figma-14: 14px;
  --text-size-figma-16: 16px;
  --text-size-figma-18: 18px;
  --text-size-figma-20: 20px;
  --text-size-figma-24: 24px;
  --text-size-figma-28: 28px;
  --text-size-figma-32: 32px;
  --text-size-figma-40: 40px;
  --text-size-figma-48: 48px;

  /* typography — weight */
  --font-weight-body-large-regular: 400;
  --font-weight-body-large-semibold: 600;
  --font-weight-body-medium-medium: 500;
  --font-weight-body-medium-regular: 400;
  --font-weight-body-medium-semibold: 600;
  --font-weight-body-small-medium: 500;
  --font-weight-body-small-regular: 400;
  --font-weight-body-small-semibold: 600;
  --font-weight-body-xsmall-regular: 400;
  --font-weight-body-xsmall-semibold: 600;
  --font-weight-cta-medium-xsmall: 500;
  --font-weight-cta-regular-large: 400;
  --font-weight-cta-regular-medium: 400;
  --font-weight-cta-regular-small: 400;
  --font-weight-cta-strong-large: 600;
  --font-weight-cta-strong-medium: 600;
  --font-weight-cta-strong-small: 600;
  --font-weight-d1: 800;
  --font-weight-d2: 600;
  --font-weight-d3: 600;
  --font-weight-d4: 600;
  --font-weight-d5: 600;
  --font-weight-d6: 600;
  --font-weight-d7: 600;
  --font-weight-eyebrow-large-regular: 420;
  --font-weight-eyebrow-large-semibold: 600;
  --font-weight-eyebrow-small-regular: 420;
  --font-weight-eyebrow-small-semibold: 600;
  --font-weight-h1: 400;
  --font-weight-h2: 400;
  --font-weight-h3: 400;
  --font-weight-h4: 400;
  --font-weight-h5: 400;
  --font-weight-h6: 600;
  --font-weight-h7: 400;
  --font-weight-mono-large-semibold: 600;
  --font-weight-mono-medium-medium: 500;
  --font-weight-mono-medium-regular: 400;
  --font-weight-mono-medium-semibold: 600;
  --font-weight-mono-small-regular: 400;
  --font-weight-subhead-large: 500;
  --font-weight-subhead-medium: 500;
  --font-weight-subhead-small: 500;

  /* typography — line height */
  --leading-height-body-large: 2rem;
  --leading-height-body-medium: 1.5rem;
  --leading-height-body-small: 1.125rem;
  --leading-height-body-xsmall: 1rem;
  --leading-height-cta-medium-xsmall: 1rem;
  --leading-height-cta-regular-large: 2rem;
  --leading-height-cta-regular-medium: 1.25rem;
  --leading-height-cta-regular-small: 1.125rem;
  --leading-height-cta-strong-large: 2rem;
  --leading-height-cta-strong-medium: 1.25rem;
  --leading-height-cta-strong-small: 1.125rem;
  --leading-height-d1: 4rem;
  --leading-height-d2: 3.25rem;
  --leading-height-d3: 3rem;
  --leading-height-d4: 2.125rem;
  --leading-height-d5: 2.125rem;
  --leading-height-d6: 2rem;
  --leading-height-d7: 1.625rem;
  --leading-height-eyebrow-large: 1.5rem;
  --leading-height-eyebrow-small: 1.25rem;
  --leading-height-h1: 3.5rem;
  --leading-height-h2: 3rem;
  --leading-height-h3: 2.5rem;
  --leading-height-h4: 2.5rem;
  --leading-height-h5: 1.625rem;
  --leading-height-h6: 1.625rem;
  --leading-height-h7: 1.5rem;
  --leading-height-mono-large: 1.5rem;
  --leading-height-mono-medium: 1.125rem;
  --leading-height-mono-small: 1.125rem;
  --leading-height-subhead-large: 2.5rem;
  --leading-height-subhead-medium: 2rem;
  --leading-height-subhead-small: 1.625rem;
  --leading-height-figma-mono-12: 16px;
  --leading-height-figma-title-24: 32px;
  --leading-height-figma-12: 18px;
  --leading-height-figma-14: 20px;
  --leading-height-figma-16: 24px;
  --leading-height-figma-18: 28px;
  --leading-height-figma-20: 32px;
  --leading-height-figma-24: 36px;
  --leading-height-figma-28: 40px;
  --leading-height-figma-32: 44px;
  --leading-height-figma-40: 52px;
  --leading-height-figma-48: 60px;

  /* typography — tracking */
  --tracking-body-large: 0rem;
  --tracking-body-medium: 0rem;
  --tracking-body-small: 0rem;
  --tracking-body-xsmall: 0.015625rem;
  --tracking-cta-medium-xsmall: 0.015625rem;
  --tracking-cta-regular-large: 0rem;
  --tracking-cta-regular-medium: 0rem;
  --tracking-cta-regular-small: 0rem;
  --tracking-cta-strong-large: 0rem;
  --tracking-cta-strong-medium: 0rem;
  --tracking-cta-strong-small: 0rem;
  --tracking-d1: 0.09375rem;
  --tracking-d2: 0.09375rem;
  --tracking-d3: 0.125rem;
  --tracking-d4: 0.125rem;
  --tracking-d5: 0.125rem;
  --tracking-d6: 0.09375rem;
  --tracking-d7: 0.09375rem;
  --tracking-eyebrow-large: 0.15625rem;
  --tracking-eyebrow-small: 0.140625rem;
  --tracking-h1: -0.0625rem;
  --tracking-h2: -0.0625rem;
  --tracking-h3: -0.0625rem;
  --tracking-h4: -0.03125rem;
  --tracking-h5: 0rem;
  --tracking-h6: 0rem;
  --tracking-h7: 0rem;
  --tracking-mono-large: 0rem;
  --tracking-mono-medium: 0rem;
  --tracking-mono-small: 0rem;
  --tracking-subhead-large: 0rem;
  --tracking-subhead-medium: 0rem;
  --tracking-subhead-small: 0rem;

  /* shadow */
  --shadow-xs: 0px 0px 8px rgba(17, 82, 194, 0.1);
  --shadow-sm: 0px 0px 32px rgba(17, 82, 194, 0.08);
  --shadow-sm-right: 25px 0px 32px -25px rgba(17, 82, 194, 0.08);
  --shadow-md: 0px 0px 32px rgba(17, 82, 194, 0.05), 0px 0px 32px rgba(17, 82, 194, 0.08);
  --shadow-active: 0px 0px 8px #9ec1fd;
  --shadow-glass: 0px 8px 48px #deebff;
  --shadow-demo-card: 0 0 60px rgba(30, 90, 160, 0.15);
  --shadow-phone-loading: inset 0px 4px 40px 0px rgba(239, 34, 58, 0.5);

  /* blur */
  --blur-full: 500px;
  --blur-lg: 24px;
  --blur-md: 16px;
  --blur-sm: 8px;
  --blur-splash: 174px;
  --blur-xl: 32px;
  --blur-xs: 4px;
  --blur-xxl: 40px;
  --blur-xxs: 2px;
  --blur-xxxl: 48px;

  /* other */
  --z-index-deep: -1;
  --z-index-base: 0;
  --z-index-sticky: 100;
  --z-index-raised: 200;
  --z-index-overlay: 300;
  --z-index-modal: 400;
  --z-index-popover: 500;
  --z-index-tooltip: 600;
  --z-index-toast: 700;
  --z-index-max: 9999;
  --animate-skeleton-shimmer: skeleton-shimmer 2s ease-in-out infinite;
  --animate-popup-in: popup-in 150ms ease-out;
  --animate-popup-out: popup-out 120ms ease-in;
  --animate-waiting-square: waiting-square 1200ms ease-in-out infinite;
  --animate-badge-pulse: badge-pulse 1600ms ease-in-out infinite;

  @keyframes skeleton-shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes popup-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes popup-out {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  @keyframes waiting-square {
    0%,
    40% {
      opacity: 0;
    }
    60%,
    100% {
      opacity: var(--waiting-peak, 1);
    }
  }

  @keyframes badge-pulse {
    50% {
      background-color: transparent;
    }
  }
}