/**
 * YEN Shop 莫蘭迪風格色盤
 * 以溫和橘色為主色調，搭配柔和的輔助色彩
 */

:root {
    /* 主色調 - 橘色系 */
    --primary-50: #FBF7F3;
    --primary-100: #F5EDE3;
    --primary-200: #E8C4A0;
    --primary-300: #DDB485;
    --primary-400: #D4A574;
    --primary-500: #C49660;
    --primary-600: #B8956A;
    --primary-700: #A67D52;
    --primary-800: #8B6B44;
    --primary-900: #6B5235;

    /* 輔助色調 - 莫蘭迪藍 */
    --secondary-50: #F6F7F8;
    --secondary-100: #EDEEF1;
    --secondary-200: #D4D7DD;
    --secondary-300: #C1C5CC;
    --secondary-400: #A0A8B5;
    --secondary-500: #8D95A5;
    --secondary-600: #828491;
    --secondary-700: #6D6F7A;
    --secondary-800: #5A5A64;
    --secondary-900: #45454D;

    /* 強調色 - 莫蘭迪粉 */
    --accent-50: #F8F6F6;
    --accent-100: #F1EDED;
    --accent-200: #DDD4D4;
    --accent-300: #CCC1C1;
    --accent-400: #C4A8A8;
    --accent-500: #B59595;
    --accent-600: #A58484;
    --accent-700: #8A6F6F;
    --accent-800: #6E5A5A;
    --accent-900: #534545;

    /* 第三色調 - 莫蘭迪藍 */
    --tertiary-50: #F6F7F8;
    --tertiary-100: #EDEEF1;
    --tertiary-200: #D4D7DD;
    --tertiary-300: #C1C5CC;
    --tertiary-400: #A0A8B5;
    --tertiary-500: #8D95A5;
    --tertiary-600: #828491;
    --tertiary-700: #6D6F7A;
    --tertiary-800: #5A5A64;
    --tertiary-900: #45454D;

    /* 中性色調 - 溫暖灰色系 */
    --gray-50: #F8F7F6;
    --gray-100: #F0EFED;
    --gray-200: #E6E4E1;
    --gray-300: #D1CFC9;
    --gray-400: #B5B2AB;
    --gray-500: #9B978E;
    --gray-600: #7D7A72;
    --gray-700: #625F58;
    --gray-800: #4A4740;
    --gray-900: #332F2A;

    /* 功能色調 */
    --success-50: #F6F7F8;
    --success-100: #EDEEF1;
    --success-200: #D4D7DD;
    --success-300: #C1C5CC;
    --success-400: #A0A8B5;
    --success-500: #8D95A5;
    --success-600: #828491;
    --success-700: #6D6F7A;
    --success-800: #5A5A64;
    --success-900: #45454D;

    --warning-50: #FBF7F3;
    --warning-100: #F5EDE3;
    --warning-200: #E8C4A0;
    --warning-300: #DDB485;
    --warning-400: #D4A574;
    --warning-500: #C49660;
    --warning-600: #B8956A;
    --warning-700: #A67D52;
    --warning-800: #8B6B44;
    --warning-900: #6B5235;

    --error-50: #F8F6F6;
    --error-100: #F1EDED;
    --error-200: #DDD4D4;
    --error-300: #CCC1C1;
    --error-400: #B59595;
    --error-500: #A58484;
    --error-600: #947373;
    --error-700: #7A5F5F;
    --error-800: #614C4C;
    --error-900: #4A3939;

    --info-50: #F6F7F8;
    --info-100: #EDEEF1;
    --info-200: #D4D7DD;
    --info-300: #C1C5CC;
    --info-400: #A0A8B5;
    --info-500: #8D95A5;
    --info-600: #828491;
    --info-700: #6D6F7A;
    --info-800: #5A5A64;
    --info-900: #45454D;

    /* 舊版相容性變數 */
    --primary-color: var(--primary-400);
    --secondary-color: var(--secondary-400);
    --accent-color: var(--accent-400);
    --tertiary-color: var(--tertiary-400);

    /* 背景色 */
    --bg-primary: var(--gray-50);
    --bg-secondary: #FFFFFF;
    --bg-tertiary: var(--gray-100);

    /* 文字色 */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-500);
    --text-inverse: #FFFFFF;

    /* 邊框色 */
    --border-light: var(--gray-200);
    --border-medium: var(--gray-300);
    --border-dark: var(--gray-400);

    /* 陰影 */
    --shadow-sm: 0 1px 2px rgba(51, 47, 42, 0.05);
    --shadow-md: 0 4px 6px rgba(51, 47, 42, 0.07);
    --shadow-lg: 0 10px 15px rgba(51, 47, 42, 0.1);
    --shadow-xl: 0 20px 25px rgba(51, 47, 42, 0.1);
}

/* 深色模式支援 (預留) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: var(--gray-900);
        --bg-secondary: var(--gray-800);
        --bg-tertiary: var(--gray-700);

        --text-primary: var(--gray-50);
        --text-secondary: var(--gray-200);
        --text-tertiary: var(--gray-400);

        --border-light: var(--gray-700);
        --border-medium: var(--gray-600);
        --border-dark: var(--gray-500);
    }
}

/* 色彩工具類別 */
.text-primary { color: var(--primary-400); }
.text-secondary { color: var(--secondary-400); }
.text-accent { color: var(--accent-400); }
.text-tertiary { color: var(--tertiary-400); }

.bg-primary { background-color: var(--primary-400); }
.bg-secondary { background-color: var(--secondary-400); }
.bg-accent { background-color: var(--accent-400); }
.bg-tertiary { background-color: var(--tertiary-400); }

.border-primary { border-color: var(--primary-400); }
.border-secondary { border-color: var(--secondary-400); }
.border-accent { border-color: var(--accent-400); }
.border-tertiary { border-color: var(--tertiary-400); }

/* 懸停效果 */
.hover-primary:hover { background-color: var(--primary-500); }
.hover-secondary:hover { background-color: var(--secondary-500); }
.hover-accent:hover { background-color: var(--accent-500); }
.hover-tertiary:hover { background-color: var(--tertiary-500); }