/* Generated from tokens.json — v0.1.0. Do not edit. */

:root {
  --sp-font-family: Lato, Arial, sans-serif;
  --sp-brand-recognition: #0da2e7;
  --sp-color-canvas: #ffffff;
  --sp-color-panel: #ffffff;
  --sp-color-subtle: #f5f7f8;
  --sp-color-text: #182126;
  --sp-color-secondary: #56636c;
  --sp-color-border: #e1e7eb;
  --sp-color-control-border: #7a8790;
  --sp-color-focus: #0369a1;
  --sp-color-action: #0369a1;
  --sp-color-action-hover: #075985;
  --sp-color-on-action: #ffffff;
  --sp-color-success: #166534;
  --sp-color-success-bg: #eef8f1;
  --sp-color-warning: #854d0e;
  --sp-color-warning-bg: #fef8e7;
  --sp-color-danger: #b42318;
  --sp-color-danger-bg: #fff1f0;
  --sp-color-info: #075985;
  --sp-color-info-bg: #eaf6fc;
  --sp-space-1: 0.25rem;
  --sp-space-2: 0.5rem;
  --sp-space-3: 0.75rem;
  --sp-space-4: 1rem;
  --sp-space-6: 1.5rem;
  --sp-space-8: 2rem;
  --sp-space-12: 3rem;
  --sp-space-16: 4rem;
  --sp-space-24: 6rem;
  --sp-radius-control: 0.5rem;
  --sp-radius-panel: 0.875rem;
  --sp-radius-badge: 0.375rem;
  --sp-duration-feedback: 120ms;
  --sp-duration-state: 200ms;
  --sp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sp-text-body: 1rem;
  --sp-line-body: 1.55;
  --sp-control-height: 2.75rem;
}

[data-surface="marketing"] {
  --sp-duration-reveal: 500ms;
  --sp-duration-media: 600ms;
  --sp-delay-stagger: 70ms;
  --sp-color-action: #182126;
  --sp-color-action-hover: #303f49;
  --sp-text-display: clamp(2.25rem, 4.8vw, 4rem);
  --sp-line-display: 1.08;
  --sp-tracking-display: -0.03em;
  --sp-section-space: clamp(4rem, 8vw, 7.5rem);
  --sp-content-width: 72rem;
}

[data-surface="product"] {
  --sp-color-action: #0369a1;
  --sp-color-action-hover: #075985;
  --sp-color-on-action: #ffffff;
  --sp-text-body: 0.875rem;
  --sp-line-body: 1.45;
  --sp-text-title: 1.5rem;
  --sp-group-space: 1.5rem;
}

[data-theme="dark"], [data-theme="dark"] [data-surface] {
  --sp-color-canvas: #101719;
  --sp-color-panel: #182125;
  --sp-color-subtle: #202c31;
  --sp-color-text: #f3f6f5;
  --sp-color-secondary: #adb8be;
  --sp-color-border: #34444c;
  --sp-color-control-border: #718790;
  --sp-color-focus: #7dd3fc;
  --sp-color-action: #7dd3fc;
  --sp-color-action-hover: #bae6fd;
  --sp-color-on-action: #082f49;
  --sp-color-success: #86efac;
  --sp-color-success-bg: #153323;
  --sp-color-warning: #fde68a;
  --sp-color-warning-bg: #352b18;
  --sp-color-danger: #fda29b;
  --sp-color-danger-bg: #3e2022;
  --sp-color-info: #7dd3fc;
  --sp-color-info-bg: #163343;
}