:root {
  /* Premium e-commerce — tương phản rõ, accent tiết chế (không vàng chói) */
  --color-bg: #f4f4f5;
  --color-bg-alt: #ebebed;
  --color-surface: #ffffff;
  --color-text: #18181b;
  --color-text-muted: #71717a;
  --color-brand: #7a6548;
  --color-brand-soft: rgba(122, 101, 72, 0.12);
  --color-accent: #7a6548;
  --color-accent-hover: #65533a;
  --color-accent-soft: rgba(122, 101, 72, 0.1);
  --color-accent-line: rgba(122, 101, 72, 0.28);
  --color-ink: #27272a;
  --color-ink-hover: #3f3f46;
  --color-price: #18181b;
  --color-sale: #b91c1c;
  --color-border: rgba(24, 24, 27, 0.08);
  --color-border-strong: rgba(24, 24, 27, 0.14);
  --radius-card: 14px;
  --radius-btn: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 20px 50px rgba(0, 0, 0, 0.08);
  /* System stack — không phụ thuộc Google Fonts (TTFB tốt hơn trên VPS yếu) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container-max: 1280px;
  /* Khoảng cách dọc giữa các block storefront — cố định 15px */
  --space-block: 15px;
  --space-section: var(--space-block);
  --space-section-stack: var(--space-block);
  --space-page-y: var(--space-block);
  --space-head-bottom: var(--space-block);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.28, 0.64, 1);
  --duration-fast: 0.22s;
  --duration-med: 0.5s;
  --duration-slow: 0.7s;
}