/* CSS Variables */
:root {
    /* Colors - Exact match to reference site */
    --brand-primary: #000000;
    --brand-secondary: #333333;
    --color-brand: #17684f;

    --text-primary: #000000;          /* rgb(0, 0, 0) - Main text, product names, prices */
    --text-secondary: #333333;       /* rgb(51, 51, 51) - Product descriptions */
    --text-nav: #3A3A3A;             /* rgb(58, 58, 58) - Navigation, headers */
    --text-subtitle: #9A9A9A;        /* rgb(154, 154, 154) - Section subtitles */
    --text-description: #757575;     /* rgb(117, 117, 117) - Product descriptions */
    --text-footer: #1A1A1A;          /* rgb(26, 26, 26) - Footer text */
    --text-copyright: #A8A8A8;       /* rgb(168, 168, 168) - Copyright text */
    --text-white: #ffffff;

    --bg-white: #ffffff;
    --bg-black: #000000;
    --bg-light: #f8f8f8;
    --bg-gray: #f0f0f0;

    /* Border Colors */
    --border-color: #e0e0e0;
    --border-light: #f0f0f0;
    --border-dark: #cccccc;

    /* Layout */
    --container-max-width: 1200px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;

    /* Typography */
    --font-family-primary: "Montserrat", "Noto Sans KR", Arial, sans-serif;
    
    /* Font Sizes - Exact match to reference site */
    --font-size-11: 11px;            /* Small UI text (WISH, ADD) */
    --font-size-12: 12px;            /* Product descriptions, copyright */
    --font-size-13: 13px;            /* Product names, prices, footer list items */
    --font-size-14: 14px;            /* Navigation, footer links, footer headings */
    --font-size-16: 16px;            /* Section subtitles */
    --font-size-24: 24px;            /* Main section titles */
    
    /* Title Sizes */
    --title-main: 24px;              /* Main section titles */
    --title-sub: 16px;               /* Section subtitles */
    
    /* Product Typography */
    --text-product-name: 13px;       /* Product names */
    --text-product-price: 13px;      /* Product prices */
    --text-product-desc: 12px;       /* Product descriptions */
    
    /* Footer Typography */
    --text-footer-heading: 14px;     /* Footer headings */
    --text-footer-link: 14px;        /* Footer links */
    --text-footer-list: 13px;        /* Footer list items */
    --text-footer-info: 12px;        /* Footer company info */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Product Grid */
    --product-gap: 20px;
    --product-gap-vertical: 40px;

    /* Accent Colors */
    --accent-red: #e74c3c;
}