/**
 * Boykin Legacy — Luxury Design System (Master Blueprint §31)
 *
 * Canonical tokens, typography, shell, buttons, mobile layout, and motion.
 * Maps to existing portal markup via dual selectors — no template renames required.
 *
 * @package BoykinLegacy
 */

/* --------------------------------------------------------------------------
   31.1 Luxury design tokens
   -------------------------------------------------------------------------- */
:root {
	--bl-ivory: #fcfaf5;
	--bl-warm-white: #fffdf9;
	--bl-paper: #f7f3ea;
	--bl-teal: #075a6c;
	--bl-teal-deep: #033d4a;
	--bl-teal-soft: #dcecef;
	--bl-gold: #c79a35;
	--bl-gold-light: #ead39b;
	--bl-gold-dark: #9f7420;
	--bl-crystal: #b9e3eb;
	--bl-charcoal: #292d32;
	--bl-muted: #6f777a;
	--bl-danger: #9e3e3e;
	--bl-success: #35705b;
	--bl-border: rgba(7, 90, 108, 0.16);
	--bl-gold-border: rgba(199, 154, 53, 0.42);
	--bl-shadow-sm: 0 8px 24px rgba(3, 61, 74, 0.08);
	--bl-shadow-md: 0 18px 50px rgba(3, 61, 74, 0.12);
	--bl-shadow-gold: 0 12px 30px rgba(159, 116, 32, 0.2);
	--bl-radius-sm: 12px;
	--bl-radius-md: 18px;
	--bl-radius-lg: 26px;
	--bl-content-max: 1440px;
	--bl-sidebar-width: 270px;
	--bl-mobile-nav-height: 72px;
	--bl-control-height: 48px;
	--bl-control-height-mobile: 52px;
	--bl-transition: 180ms ease;

	/* Legacy aliases consumed by portal.css */
	--legacy-gold: var(--bl-gold);
	--legacy-teal: var(--bl-teal);
	--secondary-teal: #0a6b7f;
	--marble-white: var(--bl-ivory);
	--off-white: var(--bl-paper);
	--charcoal: var(--bl-charcoal);
	--soft-gray: var(--bl-muted);
	--champagne: var(--bl-gold-light);
	--warm-sand: #d8c7a2;
	--pearl: var(--bl-warm-white);
	--legacy-gold-deep: var(--bl-gold-dark);
	--legacy-gold-light: var(--bl-gold-light);
	--legacy-teal-deep: var(--bl-teal-deep);
	--legacy-gold-muted: rgba(199, 154, 53, 0.12);
	--legacy-teal-glow: rgba(7, 90, 108, 0.1);
	--legacy-border-gold: var(--bl-gold-border);
	--legacy-border-subtle: var(--bl-border);
	--legacy-shadow: var(--bl-shadow-sm);
	--legacy-shadow-teal: var(--bl-shadow-md);
	--legacy-shadow-gold: var(--bl-shadow-gold);
	--legacy-radius: var(--bl-radius-sm);
	--legacy-radius-sm: 10px;
	--legacy-radius-lg: var(--bl-radius-lg);
	--legacy-font-heading: "Cormorant Garamond", "Cinzel", Georgia, serif;
	--legacy-font-body: "Montserrat", "Aptos", Arial, sans-serif;
	--legacy-font-signature: "Allura", "Great Vibes", cursive;
	--legacy-transition: var(--bl-transition);
}

/* --------------------------------------------------------------------------
   31.2 Typography and page foundation
   -------------------------------------------------------------------------- */
body,
.bl-portal {
	color: var(--bl-charcoal);
	background:
		radial-gradient(circle at 85% 5%, rgba(185, 227, 235, 0.25), transparent 28%),
		linear-gradient(145deg, var(--bl-warm-white), var(--bl-paper));
	font-family: var(--legacy-font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.bl-display,
.bl-section-title,
.bl-section__title,
.bl-card__title,
.bl-card-title {
	font-family: "Cormorant Garamond", Georgia, serif;
	color: var(--bl-teal-deep);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.02em;
}

.bl-section-title,
.bl-section__title {
	font-size: clamp(1.75rem, 3vw, 2.8rem);
}

.bl-eyebrow {
	color: var(--bl-gold-dark);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.bl-script-accent {
	font-family: "Allura", cursive;
	color: var(--bl-teal);
	font-size: 1.35em;
}

/* Script type is decorative only — never for forms, instructions, pricing, or buttons. */

/* --------------------------------------------------------------------------
   31.3 Luxury portal shell
   -------------------------------------------------------------------------- */
.bl-portal-shell,
.bl-portal.bl-portal--brand {
	width: min(100%, var(--bl-content-max));
	margin-inline: auto;
	min-height: 100dvh;
	background: rgba(255, 253, 249, 0.86);
	border: 1px solid var(--bl-gold-border);
	box-shadow: var(--bl-shadow-md);
	backdrop-filter: blur(12px);
}

.bl-main,
.bl-portal__main {
	min-width: 0;
	padding: clamp(20px, 3vw, 44px);
}

.bl-content-grid,
.bl-portal__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: clamp(18px, 2.4vw, 32px);
	align-items: start;
}

.bl-summary-panel,
.bl-portal__panel {
	position: sticky;
	top: 20px;
}

/* --------------------------------------------------------------------------
   31.4 Luxury cards and section headers
   -------------------------------------------------------------------------- */
.bl-luxury-card,
.bl-card.bl-card--wide,
.bl-card:not(.bl-stat-card):not(.bl-addon-card):not(.bl-package-card):not(.bl-event-type-card) {
	position: relative;
	overflow: hidden;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(247, 243, 234, 0.92));
	border: 1px solid var(--bl-gold-border);
	border-radius: var(--bl-radius-lg);
	box-shadow: var(--bl-shadow-sm);
}

.bl-luxury-card::before,
.bl-card.bl-card--wide::before,
.bl-card:not(.bl-stat-card):not(.bl-addon-card):not(.bl-package-card):not(.bl-event-type-card)::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(7, 90, 108, 0.14);
	border-radius: calc(var(--bl-radius-lg) - 8px);
	pointer-events: none;
}

.bl-luxury-card::after {
	content: "◆";
	position: absolute;
	top: 17px;
	right: 22px;
	color: rgba(199, 154, 53, 0.38);
	font-size: 0.65rem;
	pointer-events: none;
}

.bl-luxury-card {
	padding: clamp(20px, 3vw, 36px);
}

.bl-section-header,
.bl-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	padding-bottom: 18px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--bl-border);
}

/* --------------------------------------------------------------------------
   31.5 Button system — size, priority, states
   -------------------------------------------------------------------------- */
.bl-btn {
	min-height: var(--bl-control-height);
	min-width: 112px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border-radius: 14px;
	padding: 12px 20px;
	border: 1px solid transparent;
	font: inherit;
	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--bl-transition),
		box-shadow var(--bl-transition),
		background var(--bl-transition),
		opacity var(--bl-transition);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.bl-btn-primary,
.bl-btn--gold {
	color: #1f2527;
	background: linear-gradient(135deg, var(--bl-gold-light), var(--bl-gold), var(--bl-gold-dark));
	border-color: var(--bl-gold-dark);
	box-shadow: var(--bl-shadow-gold);
}

.bl-btn-secondary,
.bl-btn--outline {
	color: var(--bl-teal-deep);
	background: rgba(255, 255, 255, 0.72);
	border-color: rgba(7, 90, 108, 0.34);
}

.bl-btn-ghost,
.bl-btn--ghost {
	color: var(--bl-teal);
	background: transparent;
	border-color: transparent;
}

.bl-btn-danger {
	color: var(--bl-danger);
	background: rgba(158, 62, 62, 0.06);
	border-color: rgba(158, 62, 62, 0.3);
}

.bl-btn:hover:not(:disabled):not(.is-loading) {
	transform: translateY(-2px);
}

.bl-btn:active:not(:disabled):not(.is-loading) {
	transform: translateY(0);
}

.bl-btn:focus-visible {
	outline: 3px solid rgba(185, 227, 235, 0.95);
	outline-offset: 3px;
}

.bl-btn:disabled,
.bl-btn[aria-disabled="true"],
.bl-btn.is-loading {
	opacity: 0.46;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.bl-btn[aria-busy="true"],
.bl-btn.is-loading {
	pointer-events: none;
	opacity: 0.76;
}

/* --------------------------------------------------------------------------
   31.6–31.7 Action bar — desktop order + mobile sticky
   -------------------------------------------------------------------------- */
.bl-action-bar,
.bl-form-actions,
.bl-form-actions--primary,
.bl-form-actions--between {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* --------------------------------------------------------------------------
   31.8 Mobile bottom navigation
   -------------------------------------------------------------------------- */
.bl-mobile-nav,
.bl-portal__mobile-nav .bl-mobile-nav {
	display: none;
}

/* --------------------------------------------------------------------------
   31.9 Responsive stepper
   -------------------------------------------------------------------------- */
.bl-stepper--horizontal,
.bl-booking-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 26px;
}

.bl-step,
.bl-stepper--horizontal .bl-stepper__item,
.bl-booking-steps .bl-steps__item {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px;
	border: 1px solid var(--bl-border);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--bl-muted);
}

.bl-step[aria-current="step"],
.bl-stepper--horizontal .bl-stepper__item.is-active,
.bl-booking-steps .bl-steps__item.is-active {
	color: var(--bl-teal-deep);
	border-color: var(--bl-gold);
	background: linear-gradient(135deg, rgba(234, 211, 155, 0.22), rgba(220, 236, 239, 0.55));
}

.bl-step.is-complete,
.bl-stepper--horizontal .bl-stepper__item.is-complete,
.bl-booking-steps .bl-steps__item.is-complete {
	color: var(--bl-success);
}

.bl-step.is-locked,
.bl-stepper--horizontal .bl-stepper__item.is-locked {
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   31.10 Forms, pricing, status, feedback
   -------------------------------------------------------------------------- */
.bl-field,
.bl-form-field {
	display: grid;
	gap: 7px;
}

.bl-field label,
.bl-form-field label {
	color: var(--bl-teal-deep);
	font-weight: 750;
}

.bl-field input,
.bl-field select,
.bl-field textarea,
.bl-form-field input,
.bl-form-field select,
.bl-form-field textarea,
.bl-portal input[type="text"],
.bl-portal input[type="email"],
.bl-portal input[type="tel"],
.bl-portal input[type="number"],
.bl-portal input[type="date"],
.bl-portal input[type="time"],
.bl-portal input[type="password"],
.bl-portal select,
.bl-portal textarea {
	min-height: 48px;
	padding: 12px 14px;
	color: var(--bl-charcoal);
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(7, 90, 108, 0.28);
	border-radius: 12px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.bl-field textarea,
.bl-form-field textarea {
	min-height: 130px;
	resize: vertical;
}

.bl-field input:focus,
.bl-field select:focus,
.bl-field textarea:focus,
.bl-form-field input:focus,
.bl-form-field select:focus,
.bl-form-field textarea:focus {
	outline: 3px solid rgba(185, 227, 235, 0.65);
	border-color: var(--bl-teal);
}

.bl-field-error {
	color: var(--bl-danger);
	font-size: 0.84rem;
}

.bl-status-badge {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	background: var(--bl-teal-soft);
	color: var(--bl-teal-deep);
}

.bl-price-row {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding-block: 9px;
}

.bl-price-row--total,
.bl-pricing-total {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--bl-gold-border);
	color: var(--bl-teal-deep);
	font-size: 1.15rem;
	font-weight: 800;
}

.bl-alert {
	border-radius: 14px;
	padding: 14px 16px;
	border: 1px solid var(--bl-border);
	background: rgba(220, 236, 239, 0.42);
}

.bl-alert--error {
	color: var(--bl-danger);
	background: rgba(158, 62, 62, 0.06);
	border-color: rgba(158, 62, 62, 0.28);
}

.bl-alert--success {
	color: var(--bl-success);
	background: rgba(53, 112, 91, 0.07);
	border-color: rgba(53, 112, 91, 0.26);
}

/* --------------------------------------------------------------------------
   31.11 Motion and reduced motion
   -------------------------------------------------------------------------- */
.bl-section-panel,
.bl-section {
	animation: blFadeUp 260ms ease both;
}

@keyframes blFadeUp {
	from {
		opacity: 0;
		transform: translateY(7px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   31.7 Mobile-first layout
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.bl-portal-shell,
	.bl-portal.bl-portal--brand {
		grid-template-columns: 230px minmax(0, 1fr);
	}

	.bl-content-grid,
	.bl-portal__body {
		grid-template-columns: 1fr;
	}

	.bl-summary-panel,
	.bl-portal__panel {
		position: static;
	}
}

@media (max-width: 767px) {
	:root {
		--bl-control-height: var(--bl-control-height-mobile);
		--bl-mobile-nav-height: 72px;
	}

	.bl-portal-shell,
	.bl-portal.bl-portal--brand {
		display: block;
		width: 100%;
		border-inline: 0;
		border-radius: 0;
		box-shadow: none;
		padding-bottom: calc(var(--bl-mobile-nav-height) + env(safe-area-inset-bottom));
	}

	.bl-portal__sidebar,
	.bl-sidebar {
		display: none;
	}

	.bl-main,
	.bl-portal__main {
		padding: 16px 16px calc(112px + env(safe-area-inset-bottom));
	}

	.bl-luxury-card,
	.bl-card.bl-card--wide {
		padding: 20px 17px;
		border-radius: 20px;
	}

	.bl-section-header,
	.bl-section__header {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.bl-action-bar,
	.bl-form-actions,
	.bl-form-actions--primary,
	.bl-form-actions--between {
		position: sticky;
		bottom: calc(var(--bl-mobile-nav-height) + env(safe-area-inset-bottom));
		z-index: 40;
		display: grid;
		grid-template-columns: 1fr;
		margin-inline: -16px;
		padding: 12px 16px;
		background: rgba(255, 253, 249, 0.96);
		border-top: 1px solid var(--bl-gold-border);
		box-shadow: 0 -12px 30px rgba(3, 61, 74, 0.1);
		backdrop-filter: blur(12px);
	}

	.bl-action-bar .bl-btn,
	.bl-form-actions .bl-btn {
		width: 100%;
		min-height: 52px;
		padding-inline: 16px;
	}

	.bl-action-bar .bl-btn-primary,
	.bl-action-bar .bl-btn--gold,
	.bl-form-actions .bl-btn-primary,
	.bl-form-actions .bl-btn--gold {
		order: -1;
	}

	.bl-mobile-nav,
	.bl-portal__mobile-nav .bl-mobile-nav {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 60;
		min-height: calc(var(--bl-mobile-nav-height) + env(safe-area-inset-bottom));
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
		background: rgba(255, 253, 249, 0.98);
		border-top: 1px solid var(--bl-gold-border);
		box-shadow: 0 -10px 28px rgba(3, 61, 74, 0.12);
	}

	.bl-mobile-nav__item {
		min-width: 0;
		min-height: 48px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		color: var(--bl-muted);
		background: transparent;
		border: 0;
		border-radius: 12px;
		font-size: 0.67rem;
		font-weight: 700;
	}

	.bl-mobile-nav__item.is-active,
	.bl-mobile-nav__item[aria-current="page"] {
		color: var(--bl-teal-deep);
		background: var(--bl-teal-soft);
	}

	.bl-stepper--horizontal,
	.bl-booking-steps {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 5px;
	}

	.bl-stepper--horizontal::-webkit-scrollbar,
	.bl-booking-steps::-webkit-scrollbar {
		display: none;
	}

	.bl-step,
	.bl-stepper--horizontal .bl-stepper__item,
	.bl-booking-steps .bl-steps__item {
		flex: 0 0 min(78vw, 270px);
		scroll-snap-align: start;
	}

	input,
	select,
	textarea,
	button {
		font-size: 16px;
	}
}

@media (max-width: 390px) {
	.bl-main,
	.bl-portal__main {
		padding-inline: 12px;
	}

	.bl-luxury-card {
		padding-inline: 14px;
	}

	.bl-section-title,
	.bl-section__title {
		font-size: 1.8rem;
	}
}