@import url('fonts.css');

/**
 * Design Tokens & CSS Variables — Bách Hóa Diệu Phát Storefront
 * Quản lý toàn bộ mã màu, font chữ, kích thước, hiệu ứng dùng chung
 */
:root {
    /* -------------------------------------------------------------
     * Bảng màu chủ đạo (Color Palette)
     * ------------------------------------------------------------- */
    --color-primary: #15803d;             /* Xanh lá chủ đạo tươi mát, thực phẩm sạch */
    --color-primary-hover: #166534;       /* Xanh đậm khi hover */
    --color-primary-light: #ecfdf5;       /* Xanh nền nhạt */
    --color-primary-subtle: #d1fae5;      /* Viền/accent xanh dịu */
    
    --color-secondary: #ea580c;           /* Cam đỏ năng động (CTA, giảm giá, nổi bật) */
    --color-secondary-hover: #c2410c;     /* Cam đậm khi hover */
    --color-secondary-light: #fff7ed;     /* Cam nền nhạt */
    
    --color-accent: #f59e0b;              /* Vàng cam (sao đánh giá, ưu đãi đặc biệt) */
    --color-danger: #ef4444;              /* Đỏ cảnh báo / hot deal */
    --color-success: #10b981;             /* Xanh thành công */
    --color-info: #0284c7;                /* Xanh thông tin */

    /* Màu nền & Bề mặt */
    --color-bg: #f8fafc;                  /* Nền tổng thể trang web */
    --color-surface: #ffffff;             /* Nền card, container, header */
    --color-surface-muted: #f1f5f9;       /* Nền xám nhẹ cho tag, ô tìm kiếm */
    --color-surface-hover: #e2e8f0;       /* Nền xám khi hover */

    /* Màu viền */
    --color-border: #e2e8f0;              /* Viền card thông dụng */
    --color-border-subtle: #f1f5f9;       /* Viền rất mờ */
    --color-border-focus: #15803d;        /* Viền khi focus input */

    /* Màu chữ (Typography Colors) */
    --color-text-title: #0f172a;          /* Màu chữ tiêu đề, đậm rõ nét */
    --color-text: #334155;                /* Màu chữ nội dung chính */
    --color-text-muted: #64748b;          /* Màu chữ phụ, mô tả, chú thích */
    --color-text-inverse: #ffffff;        /* Chữ trắng trên nền tối/primary */
    --color-text-price: #dc2626;          /* Màu hiển thị giá tiền */

    /* -------------------------------------------------------------
     * Typography (Phông chữ & Cỡ chữ)
     * ------------------------------------------------------------- */
    --font-title: 'JT Marnie', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-md: 1.125rem;   /* 18px */
    --font-size-lg: 1.25rem;    /* 20px */
    --font-size-xl: 1.5rem;     /* 24px */
    --font-size-2xl: 1.875rem;  /* 30px */
    --font-size-3xl: 2.25rem;   /* 36px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* -------------------------------------------------------------
     * Spacing & Kích thước (Layout & Gap)
     * ------------------------------------------------------------- */
    --container-max-width: 1440px;
    --container-padding: 1rem;
    
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-full: 9999px;   /* Tròn trịa */

    /* -------------------------------------------------------------
     * Shadow & Độ sâu (Elevations)
     * ------------------------------------------------------------- */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 12px 20px -5px rgba(21, 128, 61, 0.15);

    /* -------------------------------------------------------------
     * Transition & Hiệu ứng
     * ------------------------------------------------------------- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}