/**

 * Xuan Cuong Handicraft - Module: variables.css

 * Design Tokens & CSS Custom Properties

 */


/**
 * Xuan Cuong Handicraft - Main Stylesheet
 * Brand tokens:
 * - Font script: Luxurious Script
 * - Font main: Alegreya & Alegreya Sans
 * - Primary: #881111
 * - Secondary: #EFF3DD
 * - CTA: #D6BF89
 * - Dark: #161616
 */

:root {
    --xc-primary: #881111;
    --xc-primary-dark: #630c0c;
    --xc-primary-light: #a81c1c;

    --xc-secondary: #EFF3DD;
    --xc-secondary-dark: #dde3c7;
    --xc-secondary-light: #EFF3DD;

    --xc-cta: #D6BF89;
    --xc-cta-hover: #c5ad75;
    --xc-cta-text: #1C1917;
    --xc-text-link: #161519;

    --xc-dark: #161616;
    --xc-dark-surface: #1E1B18;
    --xc-dark-card: #26211D;

    --xc-body-bg: #FFFFFF;
    --xc-body-text: #1E1E1E;
    --xc-muted-text: #666666;
    --xc-border: #E5E1D8;
    --xc-border-light: #F0ECE4;
    --text-gray: #60606B;
    --text-white: #FFFFFF;
    --text-black: #1E262B;
    --primary-color: #881111;

    --spacing-spacer: 32px;
    --radius-large: 12px;
    --radius-middle: 8px;

    --font-script: 'Luxurious Script', cursive;
    --font-main: 'Alegreya', serif;
    --font-sans: 'Alegreya', 'Alegreya Sans', sans-serif;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    --transition: all 0.28s ease;

    /* Lề trái/phải của .container (đồng bộ với base.css & responsive.css):
       40px ở màn >= 1520px, 120px ở 1025px – 1519px, nhỏ dần ở tablet/mobile */
    --page-gutter: 40px;
    /* Khoảng từ mép màn hình đến mép nội dung container (1440px):
       = 240px ở màn 1920px, tự co về --page-gutter ở màn nhỏ hơn */
    --edge-gutter: max(var(--page-gutter), calc((100vw - 1440px) / 2));

    /* Cỡ chữ tiêu đề / tên sản phẩm / giá ở desktop: tăng tuyến tính từ màn 1280px
       (giá trị nhỏ) đến 1920px (giá trị lớn). Tablet/mobile ghi đè trong responsive.css */
    --fs-hero: clamp(28px, calc(40px + (100vw - 1280px) * 8 / 640), 40px);
    --fs-heading: clamp(28px, calc(34px + (100vw - 1280px) * 8 / 640), 40px);
    --fs-heading-md: clamp(28px, calc(30px + (100vw - 1280px) * 6 / 640), 32px);
    --fs-script: clamp(26px, calc(30px + (100vw - 1280px) * 6 / 640), 32px);
    --fs-title-lg: clamp(24px, calc(26px + (100vw - 1280px) * 4 / 640), 32px);
    --fs-card-title: clamp(20px, calc(20px + (100vw - 1280px) * 4 / 640), 22px);
    --fs-price: clamp(20px, calc(20px + (100vw - 1280px) * 2 / 640), 22px);
    --fs-body: clamp(14px, calc(18px + (100vw - 1280px) * 2 / 640), 16px);
}

@media (min-width: 1025px) and (max-width: 1519px) {
    :root {
        --page-gutter: 120px;
    }
}

@media (max-width: 1024px) {
    :root {
        --page-gutter: 1.25rem;
    }
}

@media (max-width: 480px) {
    :root {
        --page-gutter: 1rem;
    }
}