/**
 * Abutic Dot design tokens — shared across commerce, dashboard, and order flows.
 */
:root {
  --ab-dot-bg: #fafbfc;
  --ab-dot-surface: rgba(255, 255, 255, 0.92);
  --ab-dot-border: rgba(15, 23, 42, 0.08);
  --ab-dot-text: #0f172a;
  --ab-dot-text-muted: #475569;
  --ab-dot-text-subtle: #64748b;
  --ab-dot-primary: #0066cc;
  --ab-dot-primary-hover: #0052a3;
  --ab-dot-accent: #4f46e5;
  --ab-dot-radius-sm: 12px;
  --ab-dot-radius-md: 18px;
  --ab-dot-radius-lg: 28px;
  --ab-dot-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 54px rgba(30, 64, 175, 0.08);
  --ab-dot-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  --ab-dot-sticky-z: 40;
}

.ab-dot-surface {
  background: var(--ab-dot-surface);
  border: 1px solid var(--ab-dot-border);
  border-radius: var(--ab-dot-radius-lg);
  box-shadow: var(--ab-dot-shadow);
}

.ab-dot-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 1.1rem;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(135deg, #0078f0, var(--ab-dot-accent));
  color: #fff !important;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(0, 102, 204, 0.22);
}

.ab-dot-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 102, 204, 0.16);
  background: #fff;
  color: var(--ab-dot-primary) !important;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
}