:root {
  --bg: #ffffff; --surface: #f5f5f7; --text: #1a1a1a; --muted: #6b6b6b; --border: #e5e5e5;
  --accent: #d9232e; --accent-dark: #b51c25; --success: #1d7a3e; --old-price: #9a9a9a;
  --font-body: "Mulish", system-ui, sans-serif; --font-head: "Roboto", "Mulish", sans-serif;
  --radius: 8px; --radius-pill: 999px;
  --shadow: 0 2px 8px rgba(0,0,0,.06); --shadow-hover: 0 8px 24px rgba(0,0,0,.12);
  --container: 1280px; --gutter: 16px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem;
}
@media (min-width: 1024px) { :root { --gutter: 24px; } }