:root {
  --bop-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --bop-color-white: #ffffff;
  --bop-color-black: #000000;

  --bop-color-slate-50: #f8fafc;
  --bop-color-slate-100: #f1f5f9;
  --bop-color-slate-200: #e2e8f0;
  --bop-color-slate-300: #cbd5e1;
  --bop-color-slate-400: #94a3b8;
  --bop-color-slate-500: #64748b;
  --bop-color-slate-600: #475569;
  --bop-color-slate-700: #334155;
  --bop-color-slate-800: #1f2937;
  --bop-color-slate-900: #111827;
  --bop-color-slate-950: #0f172a;

  --bop-color-blue-50: #eef2ff;
  --bop-color-blue-100: #e0e7ff;
  --bop-color-blue-200: #c7d2fe;
  --bop-color-blue-500: #3b82f6;
  --bop-color-blue-600: #2563eb;
  --bop-color-blue-700: #1d4ed8;
  --bop-color-blue-brand: #0b57d0;

  --bop-color-success-100: #dcfce7;
  --bop-color-success-600: #16a34a;
  --bop-color-success-700: #15803d;

  --bop-color-warning-100: #fef3c7;
  --bop-color-warning-500: #f59e0b;
  --bop-color-warning-700: #b45309;

  --bop-color-danger-100: #fee2e2;
  --bop-color-danger-600: #dc2626;
  --bop-color-danger-700: #b91c1c;

  --bop-radius-xs: 6px;
  --bop-radius-sm: 8px;
  --bop-radius-md: 10px;
  --bop-radius-lg: 12px;
  --bop-radius-xl: 16px;
  --bop-radius-2xl: 18px;
  --bop-radius-pill: 999px;

  --bop-shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.08);
  --bop-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
  --bop-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.14);

  --bop-focus-ring: 0 0 0 3px rgba(17, 24, 39, 0.14);

  --bop-space-1: 4px;
  --bop-space-2: 8px;
  --bop-space-3: 12px;
  --bop-space-4: 16px;
  --bop-space-5: 24px;
  --bop-space-6: 32px;

  --bop-theme-bg: var(--bop-color-slate-950);
  --bop-theme-bg-alt: var(--bop-color-slate-900);
  --bop-theme-surface: rgba(15, 23, 42, 0.92);
  --bop-theme-surface-alt: rgba(31, 41, 55, 0.88);
  --bop-theme-surface-elevated: rgba(17, 24, 39, 0.98);
  --bop-theme-text: var(--bop-color-slate-50);
  --bop-theme-text-soft: var(--bop-color-slate-200);
  --bop-theme-text-muted: var(--bop-color-slate-400);
  --bop-theme-border: rgba(148, 163, 184, 0.24);
  --bop-theme-accent: var(--bop-color-blue-brand);
  --bop-theme-accent-strong: var(--bop-color-blue-500);
  --bop-theme-shadow: 0 18px 40px rgba(2, 6, 23, 0.38);
  --bop-theme-map-bg: #08101b;

  /* Onboarding tour (BopTour) — shared across all BOP plugins so the
     overlay, card and step buttons look identical regardless of the
     plugin's framework (Vue, vanilla, PHP). */
  --bop-tour-overlay-bg: rgba(15, 23, 42, 0.55);
  --bop-tour-spotlight-pad: 8px;
  --bop-tour-spotlight-radius: 14px;
  --bop-tour-spotlight-ring: 0 0 0 3px rgba(255, 255, 255, 0.18);
  --bop-tour-card-bg: #f6f1e8;
  --bop-tour-card-fg: #11181f;
  --bop-tour-card-muted: #5b6470;
  --bop-tour-card-border: rgba(17, 24, 31, 0.08);
  --bop-tour-card-shadow: 0 20px 50px rgba(2, 6, 23, 0.28);
  --bop-tour-card-radius: 14px;
  --bop-tour-card-padding: 22px 24px;
  --bop-tour-card-max-width: 380px;
  --bop-tour-btn-primary-bg: #11181f;
  --bop-tour-btn-primary-fg: #ffffff;
  --bop-tour-btn-secondary-bg: #ffffff;
  --bop-tour-btn-secondary-fg: #11181f;
  --bop-tour-btn-secondary-border: rgba(17, 24, 31, 0.18);
  --bop-tour-btn-skip-fg: #5b6470;
  --bop-tour-step-label-fg: #8a93a1;
  --bop-tour-progress-bg: rgba(17, 24, 31, 0.12);
  --bop-tour-progress-fill: #11181f;
  --bop-tour-btn-primary-bg-hover: #000;
  --bop-tour-btn-skip-fg-hover: #11181f;
  --bop-tour-restart-bg: #ffffff;
  --bop-tour-restart-fg: #11181f;
  --bop-tour-restart-bg-hover: #f1f5f9;
  --bop-tour-restart-border: rgba(17, 24, 31, 0.18);
  --bop-tour-z-overlay: 9998;
  --bop-tour-z-spotlight: 9999;
  --bop-tour-z-card: 10000;
}

/* Onboarding tour — dark mode overrides. Apply on top of the global
   data-bop-theme="dark" attribute so the tour follows the host app's
   theme. Default tokens above are the LIGHT (cream-card) values. */
html[data-bop-theme="dark"] {
  color-scheme: dark;
  --bop-tour-overlay-bg: rgba(0, 0, 0, 0.65);
  --bop-tour-spotlight-ring: 0 0 0 3px rgba(255, 255, 255, 0.24);
  --bop-tour-card-bg: rgba(17, 24, 39, 0.98);
  --bop-tour-card-fg: var(--bop-color-slate-50);
  --bop-tour-card-muted: var(--bop-color-slate-400);
  --bop-tour-card-border: rgba(148, 163, 184, 0.24);
  --bop-tour-card-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  --bop-tour-btn-primary-bg: var(--bop-color-slate-50);
  --bop-tour-btn-primary-fg: var(--bop-color-slate-950);
  --bop-tour-btn-primary-bg-hover: var(--bop-color-slate-200);
  --bop-tour-btn-secondary-bg: rgba(31, 41, 55, 0.7);
  --bop-tour-btn-secondary-fg: var(--bop-color-slate-50);
  --bop-tour-btn-secondary-border: rgba(148, 163, 184, 0.32);
  --bop-tour-btn-skip-fg: var(--bop-color-slate-400);
  --bop-tour-btn-skip-fg-hover: var(--bop-color-slate-50);
  --bop-tour-step-label-fg: var(--bop-color-slate-500);
  --bop-tour-progress-bg: rgba(148, 163, 184, 0.22);
  --bop-tour-progress-fill: var(--bop-color-slate-50);
  --bop-tour-restart-bg: rgba(17, 24, 39, 0.92);
  --bop-tour-restart-fg: var(--bop-color-slate-50);
  --bop-tour-restart-bg-hover: rgba(31, 41, 55, 0.96);
  --bop-tour-restart-border: rgba(148, 163, 184, 0.32);
}

html[data-bop-theme="light"] {
  --bop-theme-bg: var(--bop-color-slate-50);
  --bop-theme-bg-alt: var(--bop-color-blue-50);
  --bop-theme-surface: rgba(255, 255, 255, 0.96);
  --bop-theme-surface-alt: rgba(241, 245, 249, 0.94);
  --bop-theme-surface-elevated: rgba(255, 255, 255, 0.99);
  --bop-theme-text: var(--bop-color-slate-950);
  --bop-theme-text-soft: var(--bop-color-slate-700);
  --bop-theme-text-muted: var(--bop-color-slate-500);
  --bop-theme-border: rgba(15, 23, 42, 0.12);
  --bop-theme-accent: var(--bop-color-blue-brand);
  --bop-theme-accent-strong: var(--bop-color-blue-700);
  --bop-theme-shadow: var(--bop-shadow-md);
  --bop-theme-map-bg: #e9edf2;
  color-scheme: light;
}