@import url("../../shared/design-tokens.css");

:root {
  --tour-max-width: 84rem;
  --tour-sticky: 6.5rem;
  --tour-sticky-total: 6.5rem;
  --tour-line-width: 3px;
  --tour-transition: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --tour-on-primary-bg: color-mix(in srgb, var(--zen-primary) 82%, #000000);

  --tour-tone-muted: var(--zen-text-secondary);
  --tour-tone-accent: var(--zen-accent);
  --tour-tone-warning: var(--zen-warning);
  --tour-tone-success: var(--zen-success);
  --tour-tone-destructive: var(--zen-error);

  --tour-tone-you: var(--zen-secondary);
  --tour-tone-agent: var(--zen-info);
  --tour-tone-zensu: var(--zen-primary);
}

.dark {
  --tour-on-primary-bg: var(--zen-primary);

  --tour-tone-you: var(--zen-secondary-light);
  --tour-tone-agent: var(--zen-accent);
}