:root {  --space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 40px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 80px;  --radius-none: 0;
--radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;   --shadow-none: none;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);  --border-color-light: #e8e8e8;
--border-color-default: #d0d0d0;
--border-color-dark: #b0b0b0;
--border-width: 1px;  --gray-50: #fafafa;
--gray-100: #f5f5f5;
--gray-200: #e8e8e8;
--gray-300: #d0d0d0;
--gray-400: #b0b0b0;
--gray-500: #909090;
--gray-600: #707070;
--gray-700: #505050;
--gray-800: #303030;
--gray-900: #1a1a1a;  --color-success: #27ae60;
--color-error: #e74c3c;
--color-warning: #f39c12;
--color-info: #2196f3; --color-success-light: rgba(39, 174, 96, 0.1);
--color-error-light: rgba(231, 76, 60, 0.1);
--color-warning-light: rgba(243, 156, 18, 0.1);
--color-info-light: rgba(33, 150, 243, 0.1);  --font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 32px;
--font-size-4xl: 40px; --line-height-tight: 1.4;
--line-height-normal: 1.6;
--line-height-relaxed: 1.7; --font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700; --letter-spacing-tight: -0.01em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;  --transition-fast: 0.15s ease;
--transition-normal: 0.2s ease;  --z-base: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;              }  *,
*::before,
*::after {
box-sizing: border-box;
} :focus-visible {
outline: 2px solid var(--accent, #0073aa);
outline-offset: 2px;
} html {
scroll-behavior: smooth;
} body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}  .mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); } .shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); } .border { border: var(--border-width) solid var(--border-color-default); }
.border-light { border: var(--border-width) solid var(--border-color-light); }
.border-dark { border: var(--border-width) solid var(--border-color-dark); } .rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); } .text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); } .text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-900 { color: var(--gray-900); }
.bg-white { background-color: #fff; }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); } .listing-featured-badge,
.listing-promoted-badge {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
padding: 6px 12px;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
color: white;
border-radius: var(--radius-full);
z-index: var(--z-dropdown);
box-shadow: var(--shadow-sm);
}
.listing-featured-badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.listing-promoted-badge {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}