/* Generated by scripts/generate_design.py from design/. Do not edit. */
/* docs/design/sitio.md §8: colors, radii, spacing, sizes and the type scale. */
:root {
  --hilo-color-accent: #057dff;
  --hilo-color-accent-text: #ffffff;
  --hilo-color-accent-subtle: rgb(5 125 255 / 0.18);
  --hilo-color-surface: #ffffff;
  --hilo-color-sidebar: #f5f5f7;
  --hilo-color-elevated: #ffffff;
  --hilo-color-divider: #e5e5ea;
  --hilo-color-text-primary: #1c1c1e;
  --hilo-color-text-secondary: #6e6e73;
  --hilo-color-bubble-own: #057dff;
  --hilo-color-bubble-own-text: #ffffff;
  --hilo-color-quote-fill-own: rgb(255 255 255 / 0.18);
  --hilo-color-bubble-other: #e8e8ed;
  --hilo-color-bubble-other-text: #1c1c1e;
  --hilo-color-composer: #f2f2f5;
  --hilo-color-danger: #c4314b;
  --hilo-color-warning: #c25e00;
  --hilo-color-unread-badge: #c4314b;
  --hilo-color-unread-dot: #057dff;
  --hilo-color-mention-badge: #c4314b;
  --hilo-color-mention-self-fill: rgb(245 180 0 / 0.349);
  --hilo-color-presence-available: #6bb700;
  --hilo-color-share-border: #6bb700;
  --hilo-color-presence-busy: #c4314b;
  --hilo-color-presence-dnd: #c4314b;
  --hilo-color-presence-away: #ffaa44;
  --hilo-color-presence-offline: #8a8886;
  --hilo-color-call-stage: #ffffff;
  --hilo-color-call-tile: #e8e8ed;
  --hilo-color-call-full-screen: #000000;
  --hilo-color-call-self-preview-border: rgb(0 0 0 / 0.2);
  --hilo-color-call-controls: #f5f5f7;
  --hilo-color-call-text: #1d1d1f;
  --hilo-color-call-hangup: #c4314b;
  --hilo-color-call-control-hover: rgb(0 0 0 / 0.059);
  --hilo-color-call-control-pressed: rgb(0 0 0 / 0.039);
  --hilo-color-call-text-pressed: rgb(0 0 0 / 0.62);
  --hilo-color-call-text-disabled: rgb(0 0 0 / 0.361);
  --hilo-color-call-answer: #248a3d;
  --hilo-color-call-speaking: #6bb700;
  --hilo-color-call-warning: #c25e00;
  --hilo-color-call-hand: #b98000;
  --hilo-color-mobile-leave-scrim: rgb(0 0 0 / 0.451);
  --hilo-color-mobile-leave-scrim-no-blur: rgb(0 0 0 / 0.851);
  --hilo-color-site-canvas: #f5f7fa;
  --hilo-color-site-surface: #ffffff;
  --hilo-color-site-line: #e3e8ef;
  --hilo-color-site-field: #838fa1;
  --hilo-color-site-text: #0c1626;
  --hilo-color-site-text-body: #4a5568;
  --hilo-color-site-text-nav: #3b4658;
  --hilo-color-site-text-muted: #646f80;
  --hilo-color-site-accent: #057dff;
  --hilo-color-site-button: #0068d6;
  --hilo-color-site-button-hover: #0055b3;
  --hilo-color-site-button-pressed: #004a9c;
  --hilo-color-site-button-text: #ffffff;
  --hilo-color-site-link: #0068d6;
  --hilo-color-site-link-hover: #0055b3;
  --hilo-color-site-accent-soft: #e6f1ff;
  --hilo-color-site-accent-soft-text: #0055b3;
  --hilo-color-site-cyan: #28c7ef;
  --hilo-color-site-cyan-text: #007a9e;
  --hilo-color-site-ink-button: #0c1626;
  --hilo-color-site-ink-button-hover: #1f2c42;
  --hilo-color-site-ink-button-text: #ffffff;
  --hilo-color-site-band: #0c1626;
  --hilo-color-site-band-card: #162238;
  --hilo-color-site-band-card-hover: #1b2a43;
  --hilo-color-site-band-line: #24334d;
  --hilo-color-site-band-text: #ffffff;
  --hilo-color-site-band-body: #b3c1d4;
  --hilo-color-site-band-muted: #9fb0c6;
  --hilo-color-site-band-accent: #28c7ef;
  --hilo-color-site-band-pill: #1f2c42;
  --hilo-color-site-band-pill-text: #e6edf6;
  --hilo-color-site-mock-stripe: #17243a;
  --hilo-color-site-mock-stripe-alt: #1b2a43;
  --hilo-color-site-mock-chip: rgb(5 10 20 / 0.702);
  --hilo-color-site-live: #ff5d5d;
  --hilo-color-site-hangup: #d63838;
  --hilo-color-site-error: #c42b2b;
  --hilo-color-site-speaking: #1fbf75;
  --hilo-color-site-shot-stripe: #eef2f7;
  --hilo-color-site-shot-stripe-alt: #e7ecf3;
  --hilo-color-site-shot-text: #5d6879;
  --hilo-color-site-header: rgb(245 247 250 / 0.878);
  --hilo-color-site-shadow: rgb(12 22 38 / 0.349);
  --hilo-radius-bubble: 17px;
  --hilo-radius-composer: 20px;
  --hilo-radius-card: 12px;
  --hilo-radius-tile: 12px;
  --hilo-radius-chip: 10px;
  --hilo-radius-media: 11px;
  --hilo-radius-control: 8px;
  --hilo-radius-call-bar: 16px;
  --hilo-radius-call-button: 8px;
  --hilo-radius-self-preview: 9px;
  --hilo-radius-site-tag: 6px;
  --hilo-radius-site-button: 10px;
  --hilo-radius-site-control: 12px;
  --hilo-radius-site-box: 14px;
  --hilo-radius-site-card: 16px;
  --hilo-radius-site-panel: 20px;
  --hilo-radius-site-pill: 999px;
  --hilo-spacing-xxs: 2px;
  --hilo-spacing-xs: 4px;
  --hilo-spacing-s: 8px;
  --hilo-spacing-m: 12px;
  --hilo-spacing-l: 16px;
  --hilo-spacing-xl: 22px;
  --hilo-spacing-xxl: 32px;
  --hilo-spacing-bubble-horizontal: 13px;
  --hilo-spacing-bubble-vertical: 9px;
  --hilo-spacing-bubble-line: 2px;
  --hilo-spacing-site-gutter: 24px;
  --hilo-spacing-site-gutter-phone: 16px;
  --hilo-spacing-site-section: 80px;
  --hilo-spacing-site-section-phone: 56px;
  --hilo-spacing-site-hero-top: 88px;
  --hilo-spacing-site-hero-bottom: 64px;
  --hilo-spacing-site-columns: 56px;
  --hilo-spacing-site-block: 40px;
  --hilo-spacing-site-card: 28px;
  --hilo-spacing-site-stack: 28px;
  --hilo-size-sidebar: 292px;
  --hilo-size-avatar-row: 36px;
  --hilo-size-avatar-header: 32px;
  --hilo-size-avatar-account: 26px;
  --hilo-size-presence-badge: 12px;
  --hilo-size-bubble-max-width: 520px;
  --hilo-size-icon: 20px;
  --hilo-size-call-control: 44px;
  --hilo-size-rail: 72px;
  --hilo-size-rail-tile: 44px;
  --hilo-size-channel-row: 32px;
  --hilo-size-voice-avatar: 20px;
  --hilo-size-voice-speaking-ring: 2px;
  --hilo-size-call-button: 40px;
  --hilo-size-call-hangup-width: 56px;
  --hilo-size-call-grip: 24px;
  --hilo-size-call-bar-margin: 18px;
  --hilo-size-bubble-tail: 6px;
  --hilo-size-call-avatar: 76px;
  --hilo-size-gif-panel-width: 360px;
  --hilo-size-gif-panel-height: 420px;
  --hilo-size-gif-tile: 96px;
  --hilo-size-quote-bar: 3px;
  --hilo-size-mention-picker: 320px;
  --hilo-size-mention-row: 40px;
  --hilo-size-mention-badge: 18px;
  --hilo-size-activity-badge: 18px;
  --hilo-size-palette-width: 560px;
  --hilo-size-palette-row: 44px;
  --hilo-size-palette-icon: 28px;
  --hilo-size-thread-panel: 360px;
  --hilo-size-background-panel-width: 336px;
  --hilo-size-background-tile: 96px;
  --hilo-size-background-tile-height: 54px;
  --hilo-size-background-tile-border: 2px;
  --hilo-size-background-badge: 18px;
  --hilo-size-thread-avatar: 18px;
  --hilo-size-chat-panel-action: 28px;
  --hilo-size-chat-panel-icon: 16px;
  --hilo-size-chat-send: 32px;
  --hilo-size-chat-delete: 24px;
  --hilo-size-icon-inline: 14px;
  --hilo-size-status-dot: 7px;
  --hilo-size-breakout-panel: 340px;
  --hilo-size-breakout-chip: 28px;
  --hilo-size-update-required-icon: 40px;
  --hilo-size-update-required-width: 400px;
  --hilo-size-share-lobby-max-width: 480px;
  --hilo-size-share-lobby-close: 28px;
  --hilo-size-mobile-self-preview-width: 96px;
  --hilo-size-mobile-self-preview-height: 128px;
  --hilo-size-mobile-strip-tile-width: 72px;
  --hilo-size-mobile-strip-tile-height: 96px;
  --hilo-size-mobile-leave-button: 48px;
  --hilo-size-mobile-leave-width: 400px;
  --hilo-size-mobile-leave-blur: 30px;
  --hilo-size-empty-mark: 72px;
  --hilo-size-settings-width: 720px;
  --hilo-size-settings-height: 520px;
  --hilo-size-settings-sidebar: 200px;
  --hilo-size-feedback-width: 480px;
  --hilo-size-feedback-text-height: 120px;
  --hilo-size-feedback-preview-height: 140px;
  --hilo-size-sign-in-logo: 16px;
  --hilo-size-sign-in-logo-column: 40px;
  --hilo-size-person-card: 300px;
  --hilo-size-person-card-avatar: 64px;
  --hilo-size-person-card-button: 32px;
  --hilo-size-site-page: 1200px;
  --hilo-size-site-narrow: 1000px;
  --hilo-size-site-prose: 680px;
  --hilo-size-site-lead: 520px;
  --hilo-size-site-heading: 640px;
  --hilo-size-site-file-box: 560px;
  --hilo-size-site-field: 52px;
  --hilo-size-site-target: 44px;
  --hilo-size-site-logo: 40px;
  --hilo-size-site-logo-footer: 30px;
  --hilo-size-site-dot: 8px;
  --hilo-size-site-os-logo: 20px;
  --hilo-size-site-platform-logo: 28px;
  --hilo-size-site-platform-mark: 52px;
  --hilo-size-site-field-border: 1.5px;
  --hilo-size-site-field-min: 220px;
  --hilo-size-site-band-text: 460px;
  --hilo-size-site-rule: 2px;
  --hilo-size-site-stripe: 10px;
  --hilo-size-site-blur: 12px;
  --hilo-size-site-shadow-y: 30px;
  --hilo-size-site-shadow-blur: 60px;
  --hilo-size-site-shadow-spread: -20px;
  --hilo-count-mobile-grid-page: 6;
  --hilo-font-caption-size: 11px;
  --hilo-font-caption-weight: 500;
  --hilo-font-footnote-size: 12px;
  --hilo-font-footnote-weight: 400;
  --hilo-font-body-size: 14px;
  --hilo-font-body-weight: 400;
  --hilo-font-body-strong-size: 14px;
  --hilo-font-body-strong-weight: 600;
  --hilo-font-subtitle-size: 15px;
  --hilo-font-subtitle-weight: 600;
  --hilo-font-title-size: 20px;
  --hilo-font-title-weight: 600;
  --hilo-font-large-title-size: 26px;
  --hilo-font-large-title-weight: 700;
  --hilo-font-message-size: 14px;
  --hilo-font-message-weight: 400;
  --hilo-font-message-meta-size: 10px;
  --hilo-font-message-meta-weight: 400;
  --hilo-font-message-label-size: 12px;
  --hilo-font-message-label-weight: 600;
  --hilo-font-mobile-button-size: 17px;
  --hilo-font-mobile-button-weight: 400;
  --hilo-font-mobile-button-strong-size: 17px;
  --hilo-font-mobile-button-strong-weight: 600;
  --hilo-font-site-display-size: 72px;
  --hilo-font-site-display-weight: 800;
  --hilo-font-site-display-line-height: 1.02;
  --hilo-font-site-display-letter-spacing: -0.04em;
  --hilo-font-site-display-min-size: 40px;
  --hilo-font-site-display-min-weight: 800;
  --hilo-font-site-display-min-line-height: 1.05;
  --hilo-font-site-display-min-letter-spacing: -0.04em;
  --hilo-font-site-title-size: 60px;
  --hilo-font-site-title-weight: 800;
  --hilo-font-site-title-line-height: 1.05;
  --hilo-font-site-title-letter-spacing: -0.04em;
  --hilo-font-site-title-min-size: 36px;
  --hilo-font-site-title-min-weight: 800;
  --hilo-font-site-title-min-line-height: 1.08;
  --hilo-font-site-title-min-letter-spacing: -0.04em;
  --hilo-font-site-headline-size: 44px;
  --hilo-font-site-headline-weight: 800;
  --hilo-font-site-headline-line-height: 1.1;
  --hilo-font-site-headline-letter-spacing: -0.03em;
  --hilo-font-site-headline-min-size: 30px;
  --hilo-font-site-headline-min-weight: 800;
  --hilo-font-site-headline-min-line-height: 1.12;
  --hilo-font-site-headline-min-letter-spacing: -0.03em;
  --hilo-font-site-subhead-size: 24px;
  --hilo-font-site-subhead-weight: 800;
  --hilo-font-site-subhead-line-height: 1.2;
  --hilo-font-site-subhead-letter-spacing: -0.02em;
  --hilo-font-site-heading-size: 21px;
  --hilo-font-site-heading-weight: 700;
  --hilo-font-site-heading-line-height: 1.3;
  --hilo-font-site-card-title-size: 19px;
  --hilo-font-site-card-title-weight: 700;
  --hilo-font-site-card-title-line-height: 1.3;
  --hilo-font-site-item-title-size: 17px;
  --hilo-font-site-item-title-weight: 700;
  --hilo-font-site-item-title-line-height: 1.35;
  --hilo-font-site-label-size: 16px;
  --hilo-font-site-label-weight: 700;
  --hilo-font-site-label-line-height: 1.4;
  --hilo-font-site-lead-size: 19px;
  --hilo-font-site-lead-weight: 400;
  --hilo-font-site-lead-line-height: 1.55;
  --hilo-font-site-intro-size: 18px;
  --hilo-font-site-intro-weight: 400;
  --hilo-font-site-intro-line-height: 1.55;
  --hilo-font-site-text-size: 16px;
  --hilo-font-site-text-weight: 400;
  --hilo-font-site-text-line-height: 1.55;
  --hilo-font-site-field-size: 16px;
  --hilo-font-site-field-weight: 500;
  --hilo-font-site-field-line-height: 1.25;
  --hilo-font-site-action-size: 16px;
  --hilo-font-site-action-weight: 700;
  --hilo-font-site-action-line-height: 1.25;
  --hilo-font-site-nav-size: 15px;
  --hilo-font-site-nav-weight: 500;
  --hilo-font-site-nav-line-height: 1.3;
  --hilo-font-site-nav-compact-size: 13px;
  --hilo-font-site-nav-compact-weight: 500;
  --hilo-font-site-nav-compact-line-height: 1.3;
  --hilo-font-site-button-size: 15px;
  --hilo-font-site-button-weight: 700;
  --hilo-font-site-button-line-height: 1.25;
  --hilo-font-site-note-size: 14px;
  --hilo-font-site-note-weight: 400;
  --hilo-font-site-note-line-height: 1.5;
  --hilo-font-site-note-strong-size: 14px;
  --hilo-font-site-note-strong-weight: 600;
  --hilo-font-site-note-strong-line-height: 1.5;
  --hilo-font-site-badge-size: 13px;
  --hilo-font-site-badge-weight: 700;
  --hilo-font-site-badge-line-height: 1.3;
  --hilo-font-site-pill-size: 13px;
  --hilo-font-site-pill-weight: 600;
  --hilo-font-site-pill-line-height: 1.3;
  --hilo-font-site-chip-size: 12px;
  --hilo-font-site-chip-weight: 600;
  --hilo-font-site-chip-line-height: 1.3;
  --hilo-font-site-mono-size: 13px;
  --hilo-font-site-mono-weight: 400;
  --hilo-font-site-mono-line-height: 1.4;
  --hilo-font-site-mono-text-size: 14px;
  --hilo-font-site-mono-text-weight: 400;
  --hilo-font-site-mono-text-line-height: 1.4;
  --hilo-font-site-mono-small-size: 12px;
  --hilo-font-site-mono-small-weight: 400;
  --hilo-font-site-mono-small-line-height: 1.4;
  --hilo-font-family-site-text: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hilo-font-family-site-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hilo-color-accent: #2f8fff;
    --hilo-color-accent-subtle: rgb(47 143 255 / 0.18);
    --hilo-color-surface: #1f1f1f;
    --hilo-color-sidebar: #2a2a2a;
    --hilo-color-elevated: #2c2c2e;
    --hilo-color-divider: #3a3a3c;
    --hilo-color-text-primary: #f2f2f7;
    --hilo-color-text-secondary: #a1a1a6;
    --hilo-color-bubble-other: #3d3d3d;
    --hilo-color-bubble-other-text: #f2f2f7;
    --hilo-color-composer: #2c2c2e;
    --hilo-color-danger: #e0566e;
    --hilo-color-warning: #ffaa44;
    --hilo-color-unread-badge: #e0566e;
    --hilo-color-unread-dot: #2f8fff;
    --hilo-color-mention-badge: #e0566e;
    --hilo-color-mention-self-fill: rgb(245 180 0 / 0.4);
    --hilo-color-call-stage: #1a1a1a;
    --hilo-color-call-tile: #262626;
    --hilo-color-call-self-preview-border: rgb(255 255 255 / 0.2);
    --hilo-color-call-controls: #2b2b2b;
    --hilo-color-call-text: #ffffff;
    --hilo-color-call-control-hover: rgb(255 255 255 / 0.059);
    --hilo-color-call-control-pressed: rgb(255 255 255 / 0.039);
    --hilo-color-call-text-pressed: rgb(255 255 255 / 0.773);
    --hilo-color-call-text-disabled: rgb(255 255 255 / 0.365);
    --hilo-color-call-warning: #ffaa44;
    --hilo-color-call-hand: #ffc83d;
    --hilo-color-site-canvas: #0c1626;
    --hilo-color-site-surface: #162238;
    --hilo-color-site-line: #24334d;
    --hilo-color-site-field: #6b7d99;
    --hilo-color-site-text: #e6edf6;
    --hilo-color-site-text-body: #b3c1d4;
    --hilo-color-site-text-nav: #c7d2e0;
    --hilo-color-site-text-muted: #9fb0c6;
    --hilo-color-site-accent: #2f8fff;
    --hilo-color-site-link: #6db1ff;
    --hilo-color-site-link-hover: #a6ceff;
    --hilo-color-site-accent-soft: #13305a;
    --hilo-color-site-accent-soft-text: #a6ceff;
    --hilo-color-site-cyan-text: #28c7ef;
    --hilo-color-site-ink-button: #e6edf6;
    --hilo-color-site-ink-button-hover: #ffffff;
    --hilo-color-site-ink-button-text: #0c1626;
    --hilo-color-site-band: #08101d;
    --hilo-color-site-error: #ff8a8a;
    --hilo-color-site-shot-stripe: #1b2a43;
    --hilo-color-site-shot-stripe-alt: #17243a;
    --hilo-color-site-shot-text: #9fb0c6;
    --hilo-color-site-header: rgb(12 22 38 / 0.878);
    --hilo-color-site-shadow: rgb(0 0 0 / 0.502);
  }
}