/**
 * SFB design tokens.
 *
 * Single source of truth for every visual value in the plugin. Frontend
 * components and Elementor style controls (Module 8) write to these
 * variables — components never hardcode colors, radii, or spacing.
 *
 * Brand colors are Choi Sports Center's own: #8e46fc is used on their live
 * booking page today, #934DFF on their homepage headline accent (brighter,
 * used here for dark mode), and #11091C is their own dark theme-color
 * meta tag, reused verbatim as the dark-mode ground.
 */

:root {
	/* Brand */
	--sfb-primary: #8e46fc;
	--sfb-primary-hover: #7530e6;
	--sfb-primary-contrast: #ffffff;
	--sfb-accent: #e0a83d;

	/* Surfaces & text — neutrals biased slightly toward the violet brand */
	--sfb-bg: #f6f4fb;
	--sfb-surface: #ffffff;
	--sfb-surface-muted: #efe9fa;
	--sfb-text: #180f26;
	--sfb-text-muted: #675e7a;
	--sfb-border: #e1d9f2;

	/* Deliberately not redefined in the dark-mode blocks below — a QR
	 * code needs a guaranteed light quiet-zone to stay scannable
	 * regardless of theme. */
	--sfb-qr-bg: #ffffff;

	/* Status — independent of the purple brand primary */
	--sfb-success: #158a5a;
	--sfb-warning: #b4690e;
	--sfb-danger: #c02b2b;
	--sfb-info: #2563a8;

	/* Typography */
	--sfb-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sfb-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	--sfb-font-size-sm: 13px;
	--sfb-font-size-base: 15px;
	--sfb-font-size-lg: 17px;
	--sfb-font-size-xl: 22px;
	--sfb-font-size-2xl: 28px;
	--sfb-font-weight-normal: 400;
	--sfb-font-weight-medium: 550;
	--sfb-font-weight-bold: 680;
	--sfb-line-height: 1.55;

	/* Spacing scale */
	--sfb-space-xs: 4px;
	--sfb-space-sm: 8px;
	--sfb-space-md: 16px;
	--sfb-space-lg: 24px;
	--sfb-space-xl: 32px;

	/* Radii */
	--sfb-radius-sm: 8px;
	--sfb-radius-md: 14px;
	--sfb-radius-lg: 20px;
	--sfb-radius-pill: 999px;
	--sfb-card-radius: var(--sfb-radius-md);

	/* Shadows — layered, violet-tinted */
	--sfb-shadow-sm: 0 1px 2px rgba(24, 15, 38, 0.07), 0 2px 6px rgba(24, 15, 38, 0.05);
	--sfb-shadow-md: 0 6px 22px rgba(24, 15, 38, 0.12);
	--sfb-shadow-lg: 0 18px 44px rgba(24, 15, 38, 0.18);

	/* Buttons */
	--sfb-btn-bg: var(--sfb-primary);
	--sfb-btn-bg-hover: var(--sfb-primary-hover);
	--sfb-btn-text: var(--sfb-primary-contrast);
	--sfb-btn-radius: var(--sfb-radius-sm);
	--sfb-btn-padding: 12px 20px;

	/* Cards (court cards, booking summary) */
	--sfb-card-bg: var(--sfb-surface);
	--sfb-card-border: 1px solid var(--sfb-border);
	--sfb-card-shadow: var(--sfb-shadow-sm);
	--sfb-card-padding: var(--sfb-space-lg);

	/* Badges (sport type, indoor/outdoor, status) */
	--sfb-badge-bg: var(--sfb-surface-muted);
	--sfb-badge-text: var(--sfb-text);
	--sfb-badge-radius: var(--sfb-radius-pill);

	/* Focus ring */
	--sfb-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sfb-primary) 32%, transparent);

	color-scheme: light dark;
}

/* Dark theme — automatic (follows the visitor's OS setting); same care as
 * light, not a naive invert. The inert [data-theme] overrides below let a
 * future manual toggle "just work" without any further CSS changes. */
@media (prefers-color-scheme: dark) {
	:root {
		--sfb-bg: #11091c;
		--sfb-surface: #1b1029;
		--sfb-surface-muted: #241a33;
		--sfb-text: #f1ecfa;
		--sfb-text-muted: #a99bc0;
		--sfb-border: #34273f;
		--sfb-primary: #934dff;
		--sfb-primary-hover: #a86bff;
		--sfb-primary-contrast: #17091f;
		--sfb-accent: #f0bb5e;
		--sfb-success: #22a06b;
		--sfb-warning: #d69a4a;
		--sfb-danger: #e56a6a;
		--sfb-info: #6ba3e0;
		--sfb-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
		--sfb-shadow-md: 0 8px 26px rgba(0, 0, 0, 0.55);
		--sfb-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
	}
}
:root[data-theme="dark"] {
	--sfb-bg: #11091c;
	--sfb-surface: #1b1029;
	--sfb-surface-muted: #241a33;
	--sfb-text: #f1ecfa;
	--sfb-text-muted: #a99bc0;
	--sfb-border: #34273f;
	--sfb-primary: #934dff;
	--sfb-primary-hover: #a86bff;
	--sfb-primary-contrast: #17091f;
	--sfb-accent: #f0bb5e;
	--sfb-success: #22a06b;
	--sfb-warning: #d69a4a;
	--sfb-danger: #e56a6a;
	--sfb-info: #6ba3e0;
	--sfb-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	--sfb-shadow-md: 0 8px 26px rgba(0, 0, 0, 0.55);
	--sfb-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
}
:root[data-theme="light"] {
	--sfb-bg: #f6f4fb;
	--sfb-surface: #ffffff;
	--sfb-surface-muted: #efe9fa;
	--sfb-text: #180f26;
	--sfb-text-muted: #675e7a;
	--sfb-border: #e1d9f2;
	--sfb-primary: #8e46fc;
	--sfb-primary-hover: #7530e6;
	--sfb-primary-contrast: #ffffff;
	--sfb-accent: #e0a83d;
	--sfb-success: #158a5a;
	--sfb-warning: #b4690e;
	--sfb-danger: #c02b2b;
	--sfb-info: #2563a8;
	--sfb-card-shadow: 0 1px 2px rgba(24, 15, 38, 0.07), 0 2px 6px rgba(24, 15, 38, 0.05);
	--sfb-shadow-md: 0 6px 22px rgba(24, 15, 38, 0.12);
	--sfb-shadow-lg: 0 18px 44px rgba(24, 15, 38, 0.18);
}