:root {
  --shi-color-canvas: #f5f8ff;
  --shi-color-card: #fbfcff;
  --shi-color-popover: #fdfdff;
  --shi-color-sidebar: #f8faff;
  --shi-color-foreground: #1d1f2b;
  --shi-color-muted-foreground: #595b6c;
  --shi-color-primary: #2763ff;
  --shi-color-on-primary: #fafafa;
  --shi-color-secondary: #e7edff;
  --shi-color-on-secondary: #2b2d39;
  --shi-color-muted: #eaeffd;
  --shi-color-accent: #fc701b;
  --shi-color-on-accent: #1d1f2b;
  --shi-color-destructive: #e40014;
  --shi-color-border: #d8d9ec;
  --shi-color-input: #d8d9ec;
  --shi-color-focus-inner: #fafafa;
  --shi-color-focus-outer: #1d1f2b;
  --shi-color-chart-1: #2763ff;
  --shi-color-chart-2: #fc701b;
  --shi-color-chart-3: #8077ff;
  --shi-color-chart-4: #ddb051;
  --shi-color-chart-5: #ed6750;

  --shi-gradient-highlight: linear-gradient(135deg, #2763ff 0%, #fc701b 100%);
  --shi-gradient-canvas: linear-gradient(180deg, #fbfcff 0%, #f5f8ff 45%, #eff3ff 100%);

  --shi-surface-header: rgb(245 248 255 / 78%);
  --shi-surface-navigation: rgb(245 248 255 / 72%);
  --shi-surface-faq: rgb(251 252 255 / 88%);
  --shi-surface-footer: rgb(251 252 255 / 80%);
  --shi-surface-final-cta: rgb(251 252 255 / 78%);
  --shi-surface-card: rgb(251 252 255 / 93%);
  --shi-surface-pricing: rgb(251 252 255 / 92%);
  --shi-border-header: rgb(216 217 236 / 60%);
  --shi-border-panel: rgb(216 217 236 / 80%);
  --shi-border-soft: rgb(216 217 236 / 70%);

  --shi-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --shi-font-size-small: 14px;
  --shi-font-size-body: 16px;
  --shi-font-size-lead: 18px;
  --shi-font-size-lead-wide: 19.52px;
  --shi-font-size-section: 30px;
  --shi-font-size-hero: 36px;
  --shi-font-weight-medium: 500;
  --shi-font-weight-semibold: 600;
  --shi-font-weight-bold: 700;
  --shi-font-weight-display: 800;
  --shi-line-height-small: 1.428571;
  --shi-line-height-body: 1.5;
  --shi-line-height-section: 0.95;
  --shi-line-height-hero: 0.9;
  --shi-letter-spacing-section: -0.04em;
  --shi-letter-spacing-hero: -0.055em;

  --shi-space-1: 4px;
  --shi-space-2: 8px;
  --shi-space-3: 12px;
  --shi-space-4: 16px;
  --shi-space-5: 20px;
  --shi-space-6: 24px;
  --shi-space-7: 28px;
  --shi-space-8: 32px;
  --shi-space-10: 40px;
  --shi-space-12: 48px;
  --shi-space-18: 72px;
  --shi-space-22: 88px;
  --shi-space-24: 96px;
  --shi-space-26: 104px;
  --shi-space-28: 112px;
  --shi-space-32: 128px;
  --shi-space-34: 136px;

  --shi-radius-hairline: 2px;
  --shi-radius-control: 8px;
  --shi-radius-base: 10px;
  --shi-radius-compact-card: 14px;
  --shi-radius-form: 18px;
  --shi-radius-feature: 19.2px;
  --shi-radius-medium-panel: 22.4px;
  --shi-radius-panel: 24px;
  --shi-radius-faq: 28.8px;
  --shi-radius-card: 30.4px;
  --shi-radius-large-card: 32px;
  --shi-radius-full: 999px;

  --shi-max-width: 1280px;
  --shi-gutter: 16px;
  --shi-header-height: 64px;
  --shi-drawer-width: 288px;
  --shi-form-width: 512px;
  --shi-hero-inner-width: 928px;
  --shi-hero-copy-width: 672px;
  --shi-faq-width: 768px;
  --shi-about-intro-width: 736px;
  --shi-ecosystem-intro-width: 704px;
  --shi-section-space: 88px;
  --shi-section-space-extended: 96px;
  --shi-hero-space-top: 104px;
  --shi-hero-space-bottom: 72px;

  --shi-shadow-panel: 0 14px 34px rgb(29 31 43 / 8%), 0 2px 8px rgb(39 99 255 / 8%);
  --shi-shadow-glow: 0 18px 44px rgb(39 99 255 / 16%), 0 6px 18px rgb(252 112 27 / 8%);
  --shi-blur-small: 8px;
  --shi-blur-medium: 12px;
  --shi-blur-header: 24px;

  --shi-duration-control: 150ms;
  --shi-duration-faq: 200ms;
  --shi-duration-surface: 300ms;
  --shi-duration-drawer-open: 500ms;
  --shi-duration-drawer-close: 300ms;
  --shi-easing-control: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 640px) {
  :root {
    --shi-gutter: 24px;
    --shi-font-size-section: 36px;
    --shi-font-size-hero: 48px;
    --shi-section-space: 112px;
    --shi-section-space-extended: 128px;
    --shi-hero-space-top: 136px;
    --shi-hero-space-bottom: 96px;
  }
}

@media (min-width: 768px) {
  :root {
    --shi-font-size-section: 45.6px;
    --shi-font-size-hero: 60px;
  }
}

@media (min-width: 1024px) {
  :root {
    --shi-gutter: 32px;
    --shi-font-size-hero: 84px;
  }
}