/* GENERATED by Web/tools/tokens.mjs from product/design-tokens.json — do not edit.
   The palette the apps use, expressed as CSS. Every web surface links this
   file so the marketing site, the contact form and the admin panel cannot
   drift from iOS and Android on colour. */
:root {
  /* color */
  --color-bg: #08080B;
  --color-surface: #131318;
  --color-surface-raised: #1C1C23;
  --color-surface-sunken: #050507;
  --color-border: #26262F;
  --color-border-strong: #3A3A46;
  --color-primary: #7C5CFF;
  --color-primary-pressed: #6647E8;
  --color-primary-muted: #241C4D;
  --color-on-primary: #FFFFFF;
  --color-accent: #FF3D71;
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #F04438;
  --color-on-danger: #FFFFFF;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A1A1AD;
  --color-text-tertiary: #6B6B78;
  --color-text-on-media: #FFFFFF;
  --color-scrim: #000000A6;
  --color-scrim-soft: #00000059;
  --color-skeleton: #1C1C23;
  --color-timeline-track: #1C1C23;
  --color-timeline-shot: #2E2652;
  --color-timeline-shot-selected: #7C5CFF;
  --color-timeline-beat: #4B3F87;
  --color-timeline-playhead: #FFFFFF;
  --color-status-queued: #6B6B78;
  --color-status-working: #7C5CFF;
  --color-status-ready: #34D399;
  --color-status-failed: #F04438;

  /* space */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* size */
  --size-touch-target: 44px;
  --size-icon-sm: 16px;
  --size-icon-md: 24px;
  --size-icon-lg: 32px;
  --size-avatar-sm: 32px;
  --size-avatar-md: 48px;
  --size-avatar-lg: 88px;
  --size-button-height: 50px;
  --size-field-height: 48px;
  --size-tab-bar-height: 56px;
  --size-timeline-strip-height: 72px;
  --size-shot-thumb-width: 64px;
  --size-grid-gutter: 2px;
  --size-timeline-px-per-sec: 13px;

  /* borderWidth */
  --border-hairline: 1px;
  --border-regular: 1.5px;
  --border-thick: 2px;

  /* opacity */
  --opacity-disabled: 0.4;
  --opacity-pressed: 0.7;
  --opacity-overlay: 0.65;

  /* motion */
  --motion-instant: 100ms;
  --motion-fast: 180ms;
  --motion-normal: 260ms;
  --motion-slow: 420ms;
  --motion-spring-damping: 0.85ms;
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);

  /* type — size and weight only; line height is set per surface */
  --type-display-size: 34px;
  --type-display-weight: 700;
  --type-title-size: 28px;
  --type-title-weight: 700;
  --type-headline-size: 20px;
  --type-headline-weight: 600;
  --type-body-size: 15px;
  --type-body-weight: 400;
  --type-body-strong-size: 15px;
  --type-body-strong-weight: 600;
  --type-label-size: 13px;
  --type-label-weight: 600;
  --type-caption-size: 12px;
  --type-caption-weight: 400;
  --type-mono-size: 12px;
  --type-mono-weight: 500;
}