/*
 * THEME RYDERSHOP - nơi DUY NHẤT định nghĩa màu, font, khoảng cách của Storefront.
 * Muốn đổi giao diện (ví dụ đổi màu nhấn, đổi font) chỉ cần sửa các biến bên dưới,
 * không phải tìm trong storefront.css.
 */
:root {
    /* Màu nền và chữ: tông trung tính đen - trắng - be */
    --color-bg: #ffffff;
    --color-surface: #f6f3ee;          /* nền khối phụ (be nhạt) */
    --color-surface-strong: #ebe6dc;   /* nền ảnh chờ tải, nút phụ */
    --color-text: #141414;
    --color-text-muted: #6b665d;
    --color-border: #e4dfd5;
    --color-primary: #141414;          /* màu nút chính, chữ nhấn */
    --color-primary-contrast: #ffffff;
    --color-sale: #b3261e;             /* giá giảm, nhãn -20% */
    --color-badge-new: #141414;
    --color-badge-soldout: #8a857b;
    --color-announcement-bg: #141414;
    --color-announcement-text: #f1ece2;

    /* Font */
    --font-family-base: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size-base: 0.95rem;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --letter-spacing-title: 0.08em;

    /* Khoảng cách và bố cục */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --container-max: 1320px;
    --header-height: 64px;
    --radius: 0;                       /* phong cách tối giản: không bo góc */
    --product-image-ratio: 3 / 4;      /* tỉ lệ ảnh sản phẩm */
    --transition-fast: 0.2s ease;
}