/**
 * Universal Booking & Rental Manager — design tokens (frontend).
 *
 * One file re-themes every frontend component: booking form, calendar, time slots, cards, summary,
 * customer account, login / registration, Elementor widgets.
 *
 * Brand values are resolved in this order:
 *   1. Elementor Global Colors / Fonts         (--e-global-*)
 *   2. The site design read by the plugin      (--ubr-theme-*: Elementor kit or block theme palette,
 *                                               printed on :root by UBR\Core\ThemeAdapter)
 *   3. The fallbacks below.
 * Override anything from a theme / child theme:  body { --ubr-color-primary: #0d9488; --ubr-radius: 8px; }
 * Elementor widgets expose the main ones under Style → Theme.
 */

body {
	/* ----------------------------------------------------------- Brand colors */
	--ubr-color-primary: var(--e-global-color-primary, var(--ubr-theme-primary, #4f46e5));
	--ubr-color-secondary: var(--e-global-color-secondary, var(--ubr-theme-secondary, #0f172a));
	--ubr-color-accent: var(--e-global-color-accent, var(--ubr-theme-accent, #f59e0b));
	--ubr-color-text: var(--e-global-color-text, var(--ubr-theme-text, #1e293b));
	--ubr-color-on-primary: #ffffff; /* fallback; modern browsers pick black or white text automatically */

	/* ----------------------------------------------------------- Neutrals (light theme) */
	--ubr-color-heading: var(--ubr-color-secondary);
	--ubr-color-muted: #64748b;
	--ubr-color-subtle: #94a3b8;
	--ubr-color-border: #e5e9f0;
	--ubr-color-border-strong: #cbd5e1;
	--ubr-color-surface: #ffffff;
	--ubr-color-surface-alt: #f8fafc;
	--ubr-color-surface-sunken: #f1f5f9;
	--ubr-color-background: #f6f8fb;
	--ubr-color-overlay: rgba(15, 23, 42, .6);

	/* ----------------------------------------------------------- Feedback */
	--ubr-color-success: #059669;
	--ubr-color-warning: #d97706;
	--ubr-color-danger: #dc2626;
	--ubr-color-info: #0284c7;
	--ubr-color-whatsapp: #25d366;
	--ubr-color-whatsapp-ink: #0b7a3e;
	--ubr-color-star: #f59e0b;

	/* ----------------------------------------------------------- Typography */
	--ubr-font-body: var(--e-global-typography-text-font-family, var(--ubr-theme-font, inherit));
	--ubr-font-heading: var(--e-global-typography-primary-font-family, var(--ubr-theme-font-heading, var(--ubr-font-body)));
	--ubr-font-size-xs: .75rem;
	--ubr-font-size-sm: .875rem;
	--ubr-font-size-base: 1rem;
	--ubr-font-size-lg: 1.125rem;
	--ubr-font-size-xl: 1.375rem;
	--ubr-font-size-2xl: 1.75rem;
	--ubr-font-size-3xl: 2.25rem;
	--ubr-font-size-4xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	--ubr-font-weight-regular: 400;
	--ubr-font-weight-medium: 500;
	--ubr-font-weight-semibold: 600;
	--ubr-font-weight-bold: 700;
	--ubr-line-height: 1.6;
	--ubr-line-height-tight: 1.25;
	--ubr-letter-spacing-caps: .06em;

	/* ----------------------------------------------------------- Shape */
	--ubr-radius: 14px;          /* cards, panels — sm / lg are derived from it */
	--ubr-radius-pill: 999px;
	--ubr-border-width: 1px;

	/* ----------------------------------------------------------- Layout */
	--ubr-container: var(--ubr-theme-container, 1200px);

	/* ----------------------------------------------------------- Spacing (4px scale) */
	--ubr-space-1: 4px;
	--ubr-space-2: 8px;
	--ubr-space-3: 12px;
	--ubr-space-4: 16px;
	--ubr-space-5: 20px;
	--ubr-space-6: 24px;
	--ubr-space-7: 32px;
	--ubr-space-8: 48px;
	--ubr-space-9: 64px;
	--ubr-gap: 16px;             /* default gap between component parts */

	/* ----------------------------------------------------------- Elevation */
	--ubr-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
	--ubr-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .05);
	--ubr-shadow-md: 0 2px 4px rgba(15, 23, 42, .03), 0 12px 28px -8px rgba(15, 23, 42, .12);
	--ubr-shadow-lg: 0 4px 8px rgba(15, 23, 42, .04), 0 28px 56px -16px rgba(15, 23, 42, .22);

	/* ----------------------------------------------------------- Controls */
	--ubr-control-height: 48px;
	--ubr-control-height-sm: 38px;
	--ubr-day-size: 44px;
	--ubr-columns: 3;

	/* ----------------------------------------------------------- Motion */
	--ubr-ease: cubic-bezier(.2, .8, .2, 1);
	--ubr-duration: .18s;
}

/*
 * Derived tokens. Declared on every component root so that a color set on an Elementor widget
 * (or any wrapper) flows into the soft / strong variants automatically. Normally not edited.
 * --ubr-primary / --ubr-text / --ubr-border are accepted as legacy (v1.0) aliases.
 */
.ubr,
.ubr-root,
.ubr-sc-card,
.ubr-book-panel {
	--ubr-accent: var(--ubr-primary, var(--ubr-color-primary));
	--ubr-ink: var(--ubr-text, var(--ubr-color-text));
	--ubr-line: var(--ubr-border, var(--ubr-color-border));
	--ubr-accent-strong: color-mix(in srgb, var(--ubr-accent) 72%, #000);
	--ubr-accent-hover: color-mix(in srgb, var(--ubr-accent) 86%, #000);
	--ubr-accent-soft: color-mix(in srgb, var(--ubr-accent) 12%, var(--ubr-color-surface));
	--ubr-accent-softer: color-mix(in srgb, var(--ubr-accent) 6%, var(--ubr-color-surface));
	--ubr-accent-line: color-mix(in srgb, var(--ubr-accent) 35%, var(--ubr-color-surface));
	--ubr-ring: 0 0 0 3px color-mix(in srgb, var(--ubr-accent) 30%, transparent);
	--ubr-success-soft: color-mix(in srgb, var(--ubr-color-success) 12%, var(--ubr-color-surface));
	--ubr-warning-soft: color-mix(in srgb, var(--ubr-color-warning) 14%, var(--ubr-color-surface));
	--ubr-danger-soft: color-mix(in srgb, var(--ubr-color-danger) 10%, var(--ubr-color-surface));
	--ubr-info-soft: color-mix(in srgb, var(--ubr-color-info) 12%, var(--ubr-color-surface));
	--ubr-radius-sm: calc(var(--ubr-radius) * .6);
	--ubr-radius-lg: calc(var(--ubr-radius) * 1.45);
	--ubr-radius-button: var(--ubr-theme-radius-button, var(--ubr-radius-sm));
	--ubr-on-accent: var(--ubr-color-on-primary);

	/* Public aliases (same values, names used in the documentation). */
	--ubr-color-primary-hover: var(--ubr-accent-hover);
	--ubr-color-primary-soft: var(--ubr-accent-soft);
	--ubr-color-primary-border: var(--ubr-accent-line);

	/* Booking statuses — one palette for the account, the booking pages and the widgets. */
	--ubr-status-confirmed: var(--ubr-color-success);
	--ubr-status-pending: var(--ubr-color-warning);
	--ubr-status-paid: #0891b2;
	--ubr-status-cancelled: var(--ubr-color-danger);
	--ubr-status-refunded: #7c3aed;
	--ubr-status-neutral: var(--ubr-color-muted);
}

/* Readable text on the primary color, whatever it is: white on dark colors, near-black on light ones. */
@supports (color: oklch(from red l c h)) {
	.ubr,
	.ubr-root {
		--ubr-on-accent: oklch(from var(--ubr-accent) clamp(0.21, (0.72 - l) * 1000, 1) 0 0);
	}
}

/*
 * Dark theme (opt-in): add data-ubr-theme="dark" on a wrapper or the body, or the class .ubr-dark.
 * Only neutrals change; brand colors stay the site's.
 */
[data-ubr-theme="dark"],
.ubr-dark {
	--ubr-color-text: #e2e8f0;
	--ubr-color-heading: #f8fafc;
	--ubr-color-muted: #94a3b8;
	--ubr-color-subtle: #64748b;
	--ubr-color-border: #263244;
	--ubr-color-border-strong: #334155;
	--ubr-color-surface: #111827;
	--ubr-color-surface-alt: #0f172a;
	--ubr-color-surface-sunken: #0b1220;
	--ubr-color-background: #0b1220;
	--ubr-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
	--ubr-shadow-md: 0 12px 28px -8px rgba(0, 0, 0, .5);
	--ubr-shadow-lg: 0 28px 56px -16px rgba(0, 0, 0, .6);
	--ubr-text: #e2e8f0;
	color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
	body {
		--ubr-duration: 0s;
	}
}