/* Exact tokens from VOLCO Figma styleguide, 2026-10-09. */
:root, .editor-styles-wrapper {
  --volco-chalk: #F7F8F6;
  --volco-white: #FFFFFF;
  --volco-ink: #171D24;
  --volco-muted: #535F6B;
  --volco-steel: #DFE5EA;
  --volco-line: #C8D0D7;
  --volco-cobalt: #244DE8;
  --volco-cobalt-deep: #1936A5;
  --volco-pale-blue: #E8EEFF;
  --volco-disabled: #D9DEE4;
  --volco-error: #B3261E;
  --volco-surface-page: var(--volco-chalk);
  --volco-surface-white: var(--volco-white);
  --volco-surface-dark: var(--volco-ink);
  --volco-surface-subtle: var(--volco-steel);
  --volco-surface-accent: var(--volco-cobalt);
  --volco-surface-accent-hover: var(--volco-cobalt-deep);
  --volco-surface-accent-soft: var(--volco-pale-blue);
  --volco-text-primary: var(--volco-ink);
  --volco-text-secondary: var(--volco-muted);
  --volco-text-inverse: var(--volco-white);
  --volco-text-accent: var(--volco-cobalt);
  --volco-border-default: var(--volco-line);
  --volco-border-dark: var(--volco-muted);
  --volco-action-disabled: var(--volco-disabled);
  --volco-status-error: var(--volco-error);
  --volco-space-0: 0px;
  --volco-space-4: 4px;
  --volco-space-8: 8px;
  --volco-space-12: 12px;
  --volco-space-16: 16px;
  --volco-space-24: 24px;
  --volco-space-32: 32px;
  --volco-space-40: 40px;
  --volco-space-48: 48px;
  --volco-space-64: 64px;
  --volco-space-80: 80px;
  --volco-space-96: 96px;
  --volco-space-120: 120px;
  --volco-radius-square: 0px;
  --volco-font-heading: "noka", "Noka", Arial, sans-serif;
  --volco-font-body: "noka", "Noka", Arial, sans-serif;
  --volco-content-width: 100%;
  --volco-gutter: 20px;
  --volco-grid-gap: 24px;
  --volco-section-space: 120px;
  --volco-image-cut: 80px;
  --volco-duration-fast: 180ms;
  --volco-duration-reveal: 400ms;
  --volco-ease: cubic-bezier(.22, 1, .36, 1);
  --volco-size-display: 88px;
  --volco-size-h1: 72px;
  --volco-size-h2: 56px;
  --volco-size-h3: 32px;
  --volco-line-h1: 78px;
  --volco-line-h2: 62px;
  --volco-line-h3: 38px;
  --volco-tracking-h1: -2.5px;
  --volco-tracking-h2: -2px;
  --volco-tracking-h3: -1px;
  --volco-size-body: 18px;
  --volco-size-lead: 24px;
  --volco-size-small: 14px;
  --volco-size-label: 12px;
}
@media (max-width: 767px) {
  :root, .editor-styles-wrapper {
    --volco-gutter: 24px;
    --volco-grid-gap: 16px;
    --volco-section-space: 64px;
    --volco-size-display: 40px;
    --volco-size-h1: 40px;
    --volco-size-h2: 36px;
    --volco-size-h3: 28px;
    --volco-line-h1: 44px;
    --volco-line-h2: 40px;
    --volco-line-h3: 34px;
    --volco-tracking-h1: -1.4px;
    --volco-tracking-h2: -1.2px;
    --volco-tracking-h3: -.8px;
  }
}