@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	html {
		scroll-behavior: smooth;
		color-scheme: light dark;
	}
	/* Tailwind selection utilities replaced with native selector below for no-build fallback */
	*::selection { background: rgb(var(--brand-primary)); color:#fff; }
	/* ------------------------------------------------------------------
	   Central Design Tokens (Light + Dark)
	   Enhanced for optimal light theme presentation following Material Design
	   and Human Interface Guidelines best practices.
	   ------------------------------------------------------------------ */
	:root {
		/* Brand palette (semantic) */
		--brand-primary: 99 102 241;              /* indigo-500 */
		--brand-primary-accent: 79 70 229;        /* indigo-600 */
		--brand-secondary: 236 72 153;            /* pink-500 */
		--brand-secondary-accent: 219 39 119;     /* pink-600 */
		--brand-danger: 239 68 68;                /* red-500 */
		--brand-warning: 245 158 11;              /* amber-500 */
		--brand-success: 34 197 94;               /* green-500 */

		/* Enhanced Light Theme - Warmer, More Inviting */
		--color-bg: 252 252 253;                  /* neutral-50 - Pure, crisp background */
		--color-bg-alt: 248 250 252;              /* slate-50 - Subtle section variations */
		--color-surface: 255 255 255;             /* white - Cards and elevated content */
		--color-surface-alt: 249 250 251;         /* gray-50 - Secondary surfaces */
		--color-surface-soft: 250 250 250;        /* Soft input backgrounds */
		--color-overlay: 255 255 255 / 0.85;      /* Improved glass morphism */
		
		/* Border system - More sophisticated hierarchy */
		--color-border: 15 23 42 / 0.06;          /* Ultra-subtle default borders */
		--color-border-soft: 15 23 42 / 0.08;     /* Form elements, cards */
		--color-border-medium: 15 23 42 / 0.12;   /* Interactive elements */
		--color-border-strong: 15 23 42 / 0.18;   /* Focus states, emphasis */
		--color-border-accent: var(--brand-primary) / 0.25; /* Branded borders */
		
		/* Typography - Improved contrast and hierarchy */
		--color-text: 15 23 42;                   /* slate-900 - Primary text */
		--color-text-soft: 30 41 59;              /* slate-800 - Slightly softer headers */
		--color-text-medium: 51 65 85;            /* slate-700 - Secondary text */
		--color-text-muted: 100 116 139;          /* slate-500 - Tertiary text */
		--color-text-subtle: 148 163 184;         /* slate-400 - Placeholder text */
		--color-text-inverse: 255 255 255;        /* On dark backgrounds */
		
		/* Interactive states */
		--color-hover: 15 23 42 / 0.04;           /* Subtle hover states */
		--color-active: 15 23 42 / 0.08;          /* Active/pressed states */
		--color-focus: var(--brand-primary) / 0.12; /* Focus background */
		--color-ring: var(--brand-primary);
		
		/* Enhanced shadow system for depth */
		--elevation-0: none;
		--elevation-1: 0 1px 2px 0 rgb(15 23 42 / 0.05), 0 1px 3px 0 rgb(15 23 42 / 0.08);
		--elevation-2: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -1px rgb(15 23 42 / 0.06);
		--elevation-3: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -2px rgb(15 23 42 / 0.05);
		--elevation-4: 0 20px 25px -5px rgb(15 23 42 / 0.10), 0 10px 10px -5px rgb(15 23 42 / 0.04);
		--elevation-focus-ring: 0 0 0 3px rgb(var(--brand-primary) / 0.15);
		--elevation-glow: 0 0 0 1px rgb(var(--brand-primary) / 0.05), 0 1px 2px 0 rgb(var(--brand-primary) / 0.1);
	}
	/* (Cart quantity styles live in components layer; closing :root above) */
	.dark {
		/* Dark theme surfaces */
		--color-bg: 15 20 27;                /* deep slate/navy */
		--color-bg-alt: 21 28 37;            /* slightly lighter */
		--color-surface: 28 36 48;           /* elevated panel */
		--color-surface-alt: 34 44 58;       /* secondary panel */
		--color-overlay: 34 44 58 / 0.72;    /* frosted overlay */
		--color-border: 255 255 255 / 0.05;
		--color-border-strong: 255 255 255 / 0.12;
		--color-ring: var(--brand-primary);
		--color-text: 226 232 240;           /* slate-200 */
		--color-text-muted: 148 163 184;     /* slate-400 */
		--color-text-inverse: 15 23 42;
		--elevation-1: 0 2px 4px -2px rgb(0 0 0 / 0.45), 0 4px 6px -1px rgb(0 0 0 / 0.40);
		--elevation-2: 0 4px 14px -2px rgb(0 0 0 / 0.55), 0 8px 18px -4px rgb(0 0 0 / 0.50);
		--elevation-focus-ring: 0 0 0 4px rgb(var(--brand-secondary) / 0.30);
	}

	body { background-color: rgb(var(--color-bg)); color: rgb(var(--color-text)); }
}

@layer components {
	/* Cart quantity input dedicated styling (higher specificity than generic .input) */
	input.cart-qty { appearance:textfield; -moz-appearance:textfield; width:5rem; text-align:center; background:#f1f5f9; border:1px solid #cbd5e1; color:#0f172a; font-weight:600; border-radius:0.5rem; padding:0.25rem 0.5rem; font-size:0.875rem; line-height:1.25rem; transition:background .15s,border-color .15s,box-shadow .15s; }
	body.dark input.cart-qty, .dark input.cart-qty { background:#1e293b; color:#f1f5f9; border-color:#475569; }
	input.cart-qty:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,.35); background:#ffffff; }
	.dark input.cart-qty:focus { background:#334155; }
	input.cart-qty::-webkit-outer-spin-button, input.cart-qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
	input.cart-qty[disabled] { opacity:.6; cursor:not-allowed; }

	/* Checkout adaptation: re-use cart-qty visual language for full-width textual inputs */
	.checkout-form .cart-qty { width:100%; text-align:left; font-weight:500; letter-spacing:0; padding:0.6rem 0.75rem; background:#f1f5f9; border:1px solid #cbd5e1; color:#0f172a; border-radius:0.5rem; font-size:0.875rem; line-height:1.25rem; }
	.dark .checkout-form .cart-qty { background:#1e293b; color:#f1f5f9; border-color:#475569; }
	.checkout-form .cart-qty:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,.35); background:#ffffff; }
	.dark .checkout-form .cart-qty:focus { background:#334155; }
	.checkout-form select.cart-qty { appearance:none; background-image:linear-gradient(45deg,transparent 49%,#64748b 51%),linear-gradient(135deg,#64748b 49%,transparent 51%); background-position:right 0.9rem top 55%, right 0.65rem top 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2rem; }
	.dark .checkout-form select.cart-qty { background-image:linear-gradient(45deg,transparent 49%,#94a3b8 51%),linear-gradient(135deg,#94a3b8 49%,transparent 51%); }
	.checkout-form .cart-qty::placeholder { color:#64748b; }
	.dark .checkout-form .cart-qty::placeholder { color:#94a3b8; }
	/* Layout */
	.container-px { max-width:80rem; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem; }
	@media (min-width:640px){ .container-px { padding-left:1.5rem; padding-right:1.5rem; } }
	@media (min-width:1024px){ .container-px { padding-left:2rem; padding-right:2rem; } }
	.font-sans-alt { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Figtree', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; }

	/* Semantic surfaces with enhanced light theme aesthetics */
	.surface { 
		background-color: rgb(var(--color-surface)); 
		box-shadow: var(--elevation-1); 
		border: 1px solid rgb(var(--color-border-soft)); 
		transition: box-shadow 0.2s ease, border-color 0.2s ease;
	}
	.surface:hover { 
		box-shadow: var(--elevation-2); 
		border-color: rgb(var(--color-border-medium));
	}
	.surface-alt { 
		background-color: rgb(var(--color-surface-alt)); 
		box-shadow: var(--elevation-0); 
		border: 1px solid rgb(var(--color-border-soft)); 
	}
	.surface-glass { 
		background-color: rgb(var(--color-overlay)); 
		backdrop-filter: blur(16px); 
		-webkit-backdrop-filter: blur(16px); 
		border: 1px solid rgb(var(--color-border-soft)); 
		box-shadow: var(--elevation-1);
	}
	.surface-elevated { 
		background-color: rgb(var(--color-surface)); 
		box-shadow: var(--elevation-3); 
		border: 1px solid rgb(var(--color-border-soft)); 
	}
	.elevated { box-shadow: var(--elevation-2); }
	.border-subtle { border-color: rgb(var(--color-border)); }
	.border-soft { border-color: rgb(var(--color-border-soft)); }
	.border-medium { border-color: rgb(var(--color-border-medium)); }
	.border-strong { border-color: rgb(var(--color-border-strong)); }

	/* Enhanced text color system */
	.text-primary { color: rgb(var(--color-text)); }
	.text-soft { color: rgb(var(--color-text-soft)); }
	.text-medium { color: rgb(var(--color-text-medium)); }
	.text-muted { color: rgb(var(--color-text-muted)); }
	.text-subtle { color: rgb(var(--color-text-subtle)); }
	
	/* Interactive state helpers */
	.hover-soft:hover { background-color: rgb(var(--color-hover)); }
	.active-soft:active { background-color: rgb(var(--color-active)); }
	.focus-soft:focus { background-color: rgb(var(--color-focus)); }

	/* Text helpers */
	.text-muted { color: rgb(var(--color-text-muted)); }
	.text-inverse { color: rgb(var(--color-text-inverse)); }
	.heading-display { font-family:inherit; letter-spacing:-.02em; font-weight:700; }

	/* Enhanced button system with improved light theme aesthetics */
	.btn { 
		display: inline-flex; 
		align-items: center; 
		gap: 0.5rem; 
		font-weight: 500; 
		border-radius: 0.5rem; 
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
		padding: 0.65rem 1rem; 
		line-height: 1.25; 
		position: relative; 
		cursor: pointer; 
		text-decoration: none;
		border: 1px solid transparent;
		outline: none;
	}
	.btn:focus-visible { box-shadow: var(--elevation-focus-ring); }
	.btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
	
	/* Primary button - enhanced with depth and polish */
	.btn-primary { 
		background: linear-gradient(135deg, rgb(var(--brand-primary)) 0%, rgb(var(--brand-primary-accent)) 100%); 
		color: #fff; 
		border-color: rgb(var(--brand-primary));
		box-shadow: var(--elevation-1), inset 0 1px 0 rgb(255 255 255 / 0.1);
	}
	.btn-primary:hover { 
		background: linear-gradient(135deg, rgb(var(--brand-primary-accent)) 0%, rgb(var(--brand-primary)) 100%); 
		box-shadow: var(--elevation-2), inset 0 1px 0 rgb(255 255 255 / 0.15);
		transform: translateY(-1px);
	}
	.btn-primary:active { 
		transform: translateY(0); 
		box-shadow: var(--elevation-1); 
	}
	
	/* Secondary button - refined coral gradient */
	.btn-secondary { 
		background: linear-gradient(135deg, rgb(var(--brand-secondary)) 0%, rgb(var(--brand-secondary-accent)) 100%); 
		color: #fff; 
		border-color: rgb(var(--brand-secondary));
		box-shadow: var(--elevation-1), inset 0 1px 0 rgb(255 255 255 / 0.1);
	}
	.btn-secondary:hover { 
		background: linear-gradient(135deg, rgb(var(--brand-secondary-accent)) 0%, rgb(var(--brand-secondary)) 100%); 
		box-shadow: var(--elevation-2), inset 0 1px 0 rgb(255 255 255 / 0.15);
		transform: translateY(-1px);
	}
	
	/* Outline button - elegant and minimal */
	.btn-outline { 
		background: rgb(var(--color-surface)); 
		color: rgb(var(--color-text)); 
		border: 1px solid rgb(var(--color-border-medium)); 
		box-shadow: var(--elevation-1);
	}
	.btn-outline:hover { 
		background: rgb(var(--color-surface-alt)); 
		border-color: rgb(var(--color-border-strong));
		box-shadow: var(--elevation-2);
		transform: translateY(-1px);
	}
	
	/* Ghost button - subtle interaction */
	.btn-ghost { 
		background: transparent; 
		color: rgb(var(--color-text-muted)); 
	}
	.btn-ghost:hover { 
		background: rgb(var(--color-hover)); 
		color: rgb(var(--color-text)); 
	}
	
	/* Danger button */
	.btn-danger { 
		background: rgb(var(--brand-danger)); 
		color: #fff; 
		border-color: rgb(var(--brand-danger));
		box-shadow: var(--elevation-1);
	}
	.btn-danger:hover { 
		filter: brightness(1.05); 
		box-shadow: var(--elevation-2);
		transform: translateY(-1px);
	}

	/* Badges / Chips */
	.badge { display:inline-flex; align-items:center; gap:.25rem; border-radius:9999px; padding:.25rem .625rem; font-size:11px; font-weight:500; line-height:1.1; background: rgb(var(--color-surface-alt)); color: rgb(var(--color-text-muted)); border:1px solid rgb(var(--color-border)); }
	.badge-accent { background: rgb(var(--brand-secondary)); color:#fff; border:0; }
	.badge-outline { background: transparent; border:1px solid rgb(var(--color-border-strong)); }
	/* Status Badges */
	.badge-status-received { background: rgb(var(--color-surface-alt)); color: rgb(var(--color-text-muted)); }
	.badge-status-in-kitchen { background: rgb(var(--brand-primary)/0.12); color: rgb(var(--brand-primary)); }
	.badge-status-ready { background: rgb(var(--brand-warning)/0.15); color: rgb(var(--brand-warning)); }
	.badge-status-out { background: rgb(var(--brand-secondary)/0.18); color: rgb(var(--brand-secondary)); }
	.badge-status-delivered { background: rgb(var(--brand-success)/0.18); color: rgb(var(--brand-success)); }
	.badge-status-cancelled { background: rgb(var(--brand-danger)/0.20); color: rgb(var(--brand-danger)); }

	/* Form System */
	.form-stack { display:flex; flex-direction:column; gap:1.1rem; }
	.form-group { display:flex; flex-direction:column; gap:.45rem; }
	.form-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:rgb(var(--color-text-muted)); }
	.form-optional { font-weight:400; opacity:.7; margin-left:.25rem; }
	.form-help { font-size:.65rem; line-height:1.1; color:rgb(var(--color-text-muted)); }
	.form-error { font-size:.65rem; font-weight:500; color:rgb(var(--brand-danger)); }
	.form-control-slot > .input, .form-control-slot > select.input { width:100%; }
	.auth-card { background:rgb(var(--color-surface)); border:1px solid rgb(var(--color-border)); box-shadow:var(--elevation-1); backdrop-filter:blur(4px); }
	.dark .auth-card { background:rgb(var(--color-surface-alt)); box-shadow:var(--elevation-2); }
	.auth-heading { font-size:1.65rem; font-weight:700; letter-spacing:-.02em; }
	.auth-subtle { font-size:.8rem; color:rgb(var(--color-text-muted)); }
	.auth-actions { display:flex; flex-direction:column; gap:.75rem; margin-top:.75rem; }
	@media (min-width:480px){ .auth-actions { flex-direction:row; align-items:center; justify-content:space-between; } }

	/* Auth redesign (dashboard-inspired hero) */
	/* Removed deprecated auth hero experiment classes (.auth-grid, .auth-hero, .auth-benefits, .auth-display, .auth-panel*) during cleanup */

	/* Generic translucent panel (matches dashboard card style) */
	.panel-soft { background:rgba(255,255,255,0.80); border:1px solid rgba(255,255,255,0.30); border-radius:0.75rem; padding:1.5rem; }
	.dark .panel-soft { background:rgba(30,41,59,0.80); border-color:rgba(51,65,85,0.50); }

	/* Enhanced card system with sophisticated light theme aesthetics */
	.card { 
		border-radius: 0.75rem; 
		overflow: hidden; 
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
		background: rgb(var(--color-surface)); 
		border: 1px solid rgb(var(--color-border-soft)); 
		box-shadow: var(--elevation-1); 
		position: relative;
	}
	.card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgb(var(--color-border-medium)), transparent);
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	.card:hover { 
		box-shadow: var(--elevation-3); 
		transform: translateY(-2px); 
		border-color: rgb(var(--color-border-medium));
	}
	.card:hover::before {
		opacity: 1;
	}
	.card-muted { 
		background: rgb(var(--color-surface-alt)); 
		border-color: rgb(var(--color-border-soft));
	}
	.card-glass { 
		background: rgb(var(--color-overlay)); 
		backdrop-filter: blur(16px); 
		-webkit-backdrop-filter: blur(16px); 
		border: 1px solid rgb(var(--color-border-soft));
		box-shadow: var(--elevation-2);
	}

	/* Enhanced navigation with premium light theme aesthetics */
	.nav-bar { 
		background: rgb(var(--color-overlay)); 
		backdrop-filter: blur(20px); 
		-webkit-backdrop-filter: blur(20px); 
		border-bottom: 1px solid rgb(var(--color-border-soft)); 
		box-shadow: var(--elevation-1);
	}
	.footer-bar { 
		background: rgb(var(--color-overlay)); 
		backdrop-filter: blur(16px); 
		-webkit-backdrop-filter: blur(16px); 
		border-top: 1px solid rgb(var(--color-border-soft)); 
	}
	.nav-pill { 
		position: relative; 
		display: inline-flex; 
		align-items: center; 
		gap: 0.35rem; 
		padding: 0.625rem 1rem; 
		font-size: 0.875rem; 
		font-weight: 500; 
		border-radius: 9999px; 
		color: rgb(var(--color-text-medium)); 
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
		text-decoration: none;
	}
	.nav-pill:hover { 
		background: rgb(var(--color-hover)); 
		color: rgb(var(--color-text)); 
		transform: translateY(-1px);
	}
	.dark .nav-pill:hover { 
		background: rgb(var(--brand-primary)/0.18); 
	}
	.nav-pill::after { 
		content: ""; 
		position: absolute; 
		left: 12%; 
		right: 12%; 
		bottom: 6px; 
		height: 2px; 
		background: linear-gradient(90deg, rgb(var(--brand-primary)), rgb(var(--brand-secondary))); 
		transform: scaleX(0); 
		transform-origin: left; 
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
		border-radius: 2px; 
	}
	.nav-pill-active { 
		background: rgb(var(--color-focus)); 
		color: rgb(var(--color-text)); 
		box-shadow: var(--elevation-glow);
	}
	.dark .nav-pill-active { 
		background: rgb(var(--brand-primary)/0.25); 
	}
	.nav-pill-active::after { 
		transform: scaleX(1); 
	}
	.nav-pill:focus-visible { 
		outline: 2px solid rgb(var(--brand-primary)); 
		outline-offset: 2px; 
	}

	/* Menu category filter pills */
	.pill-filter { position:relative; display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; font-size:.75rem; letter-spacing:.025em; font-weight:600; text-transform:uppercase; border-radius:9999px; background: rgb(var(--color-surface)); color: rgb(var(--color-text-muted)); border:1px solid rgb(var(--color-border)); transition: background .25s, color .25s, box-shadow .25s; }
	.pill-filter:hover { background: rgb(var(--color-surface-alt)); color: rgb(var(--color-text)); }
	.pill-filter-active { background: linear-gradient(90deg,rgb(var(--brand-secondary)) 0%, rgb(var(--brand-secondary-accent)) 100%); color:#fff; border-color: transparent; box-shadow:0 2px 6px -1px rgb(var(--brand-secondary)/0.4); }
	.pill-filter-active:hover { filter:brightness(1.05); }
	.dark .pill-filter { background: rgb(var(--color-surface-alt)); }
	.pill-filter:focus-visible { outline:2px solid rgb(var(--brand-primary)); outline-offset:2px; }

	/* Enhanced form elements with superior light theme aesthetics */
	.input { 
		width: 100%; 
		border: 1px solid rgb(var(--color-border-soft)); 
		background-color: rgb(var(--color-surface-soft)); 
		color: rgb(var(--color-text)); 
		border-radius: 0.5rem; 
		padding: 0.625rem 0.75rem; 
		font-size: 0.875rem; 
		line-height: 1.4; 
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.03);
	}
	.input:focus { 
		outline: none; 
		border-color: rgb(var(--brand-primary)); 
		background-color: rgb(var(--color-surface)); 
		box-shadow: var(--elevation-focus-ring), inset 0 1px 2px rgb(15 23 42 / 0.03); 
	}
	.input:hover:not(:focus) { 
		border-color: rgb(var(--color-border-medium)); 
	}
	.input::placeholder { 
		color: rgb(var(--color-text-subtle)); 
		opacity: 1; 
	}
	.input:disabled { 
		opacity: 0.6; 
		cursor: not-allowed; 
		background-color: rgb(var(--color-bg-alt)); 
	}
	.dark .input { 
		background-color: rgb(var(--color-surface)); 
		border-color: rgb(var(--color-border-strong)); 
	}

	/* High-contrast form wrapper (used on checkout) */
	.form-contrast .input,
	.form-contrast select.input,
	.form-contrast .select,
	.form-contrast .textarea { 
		background-color: rgb(var(--color-surface)); 
		border-color: rgb(var(--color-border-medium)); 
		color: rgb(var(--color-text)); 
		box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.05);
	}
	.dark .form-contrast .input,
	.dark .form-contrast select.input,
	.dark .form-contrast .select,
	.dark .form-contrast .textarea { 
		background-color: rgb(var(--color-surface-alt)); 
		border-color: rgb(var(--color-border-strong)); 
		color: rgb(var(--color-text)); 
	}
	.form-contrast .input:focus,
	.form-contrast select.input:focus,
	.form-contrast .select:focus,
	.form-contrast .textarea:focus { 
		border-color: rgb(var(--brand-primary)); 
		box-shadow: var(--elevation-focus-ring), inset 0 1px 2px rgb(15 23 42 / 0.03); 
	}

	/* Enhanced checkout form fields */
	.checkout-field { 
		font-weight: 500; 
		background-color: rgb(var(--color-surface-soft)); 
		border-color: rgb(var(--color-border-soft)); 
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.02);
	}
	.checkout-field:focus { 
		background-color: rgb(var(--color-surface)); 
		border-color: rgb(var(--brand-primary)); 
		box-shadow: var(--elevation-focus-ring), inset 0 1px 2px rgb(15 23 42 / 0.03); 
	}
	.checkout-field:hover:not(:focus) { 
		border-color: rgb(var(--color-border-medium)); 
		background-color: rgb(var(--color-surface)); 
	}

	/* Placeholder color adjustments for clarity */
	.form-contrast input::placeholder,
	.form-contrast textarea::placeholder { color: rgb(var(--color-text-muted)); opacity: 1; }
	.dark .form-contrast input::placeholder,
	.dark .form-contrast textarea::placeholder { color: rgb(var(--color-text-muted)); opacity: .9; }

	.input:disabled { opacity:.55; cursor:not-allowed; }
	/* Fallback (in case @apply not processed in a no-build environment) */
	input.input { background-color: rgb(var(--color-surface-alt)); border:1px solid rgb(var(--color-border)); color: rgb(var(--color-text)); border-radius:.5rem; padding:.5rem .75rem; font-size:.875rem; }
	.dark input.input { background-color: rgb(var(--color-surface)); color: rgb(var(--color-text)); }

	/* High-specificity fallback to avoid white-on-white issues when Tailwind build or form resets override .input */
	:root input.input { background-color: rgb(var(--color-surface-alt)) !important; color: rgb(var(--color-text)) !important; }
	.dark input.input { background-color: rgb(var(--color-surface)) !important; color: rgb(var(--color-text)) !important; }
	/* Cart quantity specific tweak: ensure strong contrast and centered numeric appearance */
	input.cart-qty { font-weight:600; letter-spacing:0.5px; }
	input.input::-webkit-outer-spin-button,
	input.input::-webkit-inner-spin-button { margin:0; }
	input.input:focus { outline:none; box-shadow: var(--elevation-focus-ring); border-color: rgb(var(--brand-primary)) !important; }
	.input:focus { outline: none; box-shadow: var(--elevation-focus-ring); border-color: rgb(var(--brand-primary)); }
	.select { width:100%; border:1px solid rgb(var(--color-border)); background-color: rgb(var(--color-surface-alt)); color: rgb(var(--color-text)); border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:0.875rem; line-height:1.3; }
	.textarea { width:100%; border:1px solid rgb(var(--color-border)); background-color: rgb(var(--color-surface-alt)); color: rgb(var(--color-text)); border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:0.875rem; line-height:1.3; min-height:120px; resize:vertical; }

	/* Utility components */
	.divider { height:1px; width:100%; background: linear-gradient(to right,transparent,rgb(var(--color-border-strong)),transparent); }

	/* Auth simplified heading system (non Tailwind dependent) */
	.auth-head { text-align:center; margin-bottom:1.1rem; }
	.heading-auth { font-size:1.9rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:0 0 .35rem; }
	@media (min-width:640px){ .heading-auth { font-size:2.25rem; } }
	.auth-head p { font-size:.8rem; color:rgb(var(--color-text-muted)); margin:0; }
	.auth-subtext { font-size:.8rem; color:rgb(var(--color-text-muted)); }
	.shadow-focus { box-shadow: var(--elevation-focus-ring); }
	.glow-accent { box-shadow: 0 0 0 3px rgb(var(--brand-secondary) / 0.3); }

	/* ------------------------------------------------------------------
	   CART QUANTITY INPUTS
	   Specific styling for cart quantity controls
	------------------------------------------------------------------ */
	input.cart-qty { font-weight:600; letter-spacing:0.5px; text-align:center; }
	input.input::-webkit-outer-spin-button,
	input.input::-webkit-inner-spin-button { margin:0; }
	input.input:focus { outline:none; box-shadow: var(--elevation-focus-ring); border-color: rgb(var(--brand-primary)) !important; }
	.input:focus { outline: none; box-shadow: var(--elevation-focus-ring); border-color: rgb(var(--brand-primary)); }
	.select { width:100%; border:1px solid rgb(var(--color-border)); background-color: rgb(var(--color-surface-alt)); color: rgb(var(--color-text)); border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:0.875rem; line-height:1.3; }
	.textarea { width:100%; border:1px solid rgb(var(--color-border)); background-color: rgb(var(--color-surface-alt)); color: rgb(var(--color-text)); border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:0.875rem; line-height:1.3; min-height:120px; resize:vertical; }
}

@layer utilities {
	/* --------------------------------------------------------------
	   Minimal utility fallback (Hybrid Mode B)
	   These replicate a tiny subset of Tailwind classes frequently
	   referenced in auth & common templates so pages remain styled
	   even if the Tailwind build is not running. If Tailwind IS
	   compiled, its generated utilities will simply override or
	   coexist harmlessly with these.
	-------------------------------------------------------------- */
	.text-3xl { font-size:1.875rem; line-height:2.25rem; }
	.font-extrabold { font-weight:800; }
	.tracking-tight { letter-spacing:-.02em; }
	.text-sm { font-size:.875rem; line-height:1.25rem; }
	.text-xs { font-size:.75rem; line-height:1rem; }
	.flex { display:flex; }
	.inline-flex { display:inline-flex; }
	.items-center { align-items:center; }
	.justify-between { justify-content:space-between; }
	.justify-center { justify-content:center; }
	.grid { display:grid; }
	.gap-4 { gap:1rem; }
	.gap-2 { gap:.5rem; }
	.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top:1.5rem; }
	.mt-2 { margin-top:.5rem; }
	.mb-2 { margin-bottom:.5rem; }
	.pt-1 { padding-top:.25rem; }
	.p-6 { padding:1.5rem; }
	.rounded-xl { border-radius:.75rem; }
	.w-full { width:100%; }
	.max-w-md { max-width:28rem; }
	.w-4 { width:1rem; }
	.h-4 { height:1rem; }
	.section-y { padding-top:2.5rem; padding-bottom:2.5rem; }
	@media (min-width:768px){ .section-y { padding-top:3.5rem; padding-bottom:3.5rem; } }
	@media (min-width:640px){ .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
	.theme-fade-enter { opacity:0; transition: opacity .2s; }
	.theme-fade-enter-active { opacity:1; }
	.theme-fade-leave { opacity:1; transition: opacity .2s; }
	.theme-fade-leave-active { opacity:0; }
	.bg-app { background-color: rgb(var(--color-bg)); }
	.bg-app-alt { background-color: rgb(var(--color-bg-alt)); }
	.text-accent { color: rgb(var(--brand-secondary)); }
	.text-primary { color: rgb(var(--brand-primary)); }
	.bg-primary { background-color: rgb(var(--brand-primary)); }
	.bg-secondary { background-color: rgb(var(--brand-secondary)); }
	.ring-accent { --tw-ring-color: rgb(var(--brand-primary)); }
	.outline-accent { outline-color: rgb(var(--brand-primary)); }
}