/* =====================================================================
   GBE Design Tokens — SINGLE SOURCE OF TRUTH
   ---------------------------------------------------------------------
   Loaded FIRST (before gbe-admin.css / gbe-frontend.css / gbe-chef-pro.css
   / gbe-datetime-picker.css) on both admin and frontend. Consolidates the
   spacing / radius / control-height / input-padding / border / colour /
   focus-ring / easing values that were previously duplicated (and drifting)
   across the four stylesheets.

   Why :root AND .gbe-booking-widget?
   - :root covers all wp-admin pages + anything outside the widget.
   - Re-declaring on .gbe-booking-widget makes the tokens resilient to a
     theme (e.g. Elementor) that scopes its own custom properties and could
     otherwise shadow ours inside the widget subtree.

   Several of these tokens were REFERENCED but NEVER DEFINED before this
   file existed (--gbe-clay-400, --gbe-gold-soft, --gbe-brand,
   --gbe-brand-dark, --gbe-focus-ring): they silently fell back to literals
   or to `unset`. Defining them here fixes those latent bugs too.
   ===================================================================== */

:root,
.gbe-booking-widget {
	/* ---- Spacing scale (4px base) ---- */
	--gbe-space-1: 4px;
	--gbe-space-2: 8px;
	--gbe-space-3: 12px;
	--gbe-space-4: 16px;
	--gbe-space-5: 20px;
	--gbe-space-6: 24px;
	--gbe-space-8: 32px;

	/* ---- Radius scale ---- */
	--gbe-radius-xs: 4px;
	--gbe-radius-sm: 8px;
	--gbe-radius-md: 12px;
	--gbe-radius-lg: 14px;
	--gbe-radius-xl: 18px;
	--gbe-radius-pill: 999px;

	/* ---- Control geometry ---- */
	--gbe-control-h-sm: 36px;   /* round/icon buttons, counters */
	--gbe-control-h: 44px;      /* canonical text input / select height */
	--gbe-control-h-lg: 50px;   /* primary CTA height */
	--gbe-input-pad-x: 16px;    /* canonical horizontal input padding */
	--gbe-input-pad-y: 0px;     /* vertical pad is 0 — height centers the text */
	--gbe-input-pad: 0 var(--gbe-input-pad-x);
	--gbe-border-w: 1.5px;      /* canonical control border width */

	/* ---- Clay palette (warm neutral) ---- */
	--gbe-clay-900: #1A1612;    /* ink / primary text */
	--gbe-clay-700: #3D332A;    /* body text */
	--gbe-clay-500: #6B5A47;    /* muted text / hints */
	--gbe-clay-400: #A8997A;    /* placeholder text (was referenced, undefined) */
	--gbe-clay-300: #C9B89F;    /* borders / disabled */
	--gbe-clay-200: #E8DCC4;    /* hairline borders, zebra rows */
	--gbe-clay-100: #FAF4EA;    /* surface tint / table head */
	--gbe-clay-50:  #FDFAF4;    /* card / panel background */

	/* ---- Brand accents ---- */
	--gbe-terracotta:   #A8472B; /* primary brand accent */
	--gbe-terracotta-d: #7E2E16; /* brand dark / active */
	/* Aliases for the admin css references that were undefined: */
	--gbe-brand:        #A8472B;
	--gbe-brand-dark:   #7E2E16;
	--gbe-saffron:      #D9A434; /* decorative only — fails text contrast */
	--gbe-gold-soft:    #8C6A1A; /* accessible saffron for TEXT (was undefined) */

	/* ---- Status colour map ---- */
	--gbe-status-pending-bg:   #FFF1D0;
	--gbe-status-pending-fg:   #8C6A1A;
	--gbe-status-confirmed-bg: #E8F0D4;
	--gbe-status-confirmed-fg: #4E5E2A;
	--gbe-status-cancelled-bg: #F1E4DF;
	--gbe-status-cancelled-fg: #7E2E16;
	--gbe-status-completed-bg: #DCE9E4;
	--gbe-status-completed-fg: #2F5246;
	--gbe-status-refunded-bg:  #F1E4DF;
	--gbe-status-refunded-fg:  #6B1F2E;

	/* ---- Focus rings (single canonical alpha — WCAG 1.4.11 3:1) ---- */
	--gbe-focus-ring:     0 0 0 3px rgba(168, 71, 43, 0.25);
	--gbe-focus-ring-err: 0 0 0 3px rgba(188, 58, 58, 0.30);

	/* ---- Elevation ---- */
	--gbe-shadow-soft: 0 1px 0 rgba(26,22,18,0.06), 0 8px 24px -12px rgba(126,46,22,0.18);

	/* ---- Motion ---- */
	--gbe-ease: cubic-bezier(0.19, 1, 0.22, 1);
	--gbe-dur-fast: 180ms;
	--gbe-dur: 360ms;
}

/* =====================================================================
   Text-overflow utilities — consolidate the per-element, conflicting
   overflow strategies (css-uniformity Component 6). Opt-in classes so we
   don't change existing layout unless applied.
   ===================================================================== */
.gbe-truncate {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gbe-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gbe-wrap {
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

/* =====================================================================
   Reduced motion — one global block (replaces the three separate ones
   scattered across the widget stylesheets).
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.gbe-booking-widget *,
	.gbe-admin-page * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}