/* variables.css - 全域 CSS 變數定義 */

:root {
    /* === 主要品牌色彩 === */
    --primary-color: #d8e1be;
    --primary-hover: #c7cfad;
    --primary-active: #8ba045;
    --primary-dark: #7a9139;
    --primary-light: #dce3c5;
    --primary-extra-light: #f5f7f0;

    /* === 文字顏色 === */
    --text-primary: #2e302f;
    --text-secondary: #4f5350;
    --text-muted: #6c757d;
    --text-light: #777;

    /* === 狀態顏色 === */
    --success-bg: #dce3c5;
    --success-text: #2e302f;
    --success-border: #8ba045;

    --danger-bg: #e1cacaff;
    --danger-text: #7a2323ff;
    --danger-color: #9f5d63ff;

    --warning-bg: #fff3cd;
    --warning-text: #856404;
    --warning-color: #e3c877ff;

    --info-bg: #cbdcf1ff;
    --info-text: #1b2839ff;
    --info-color: #516a89ff;

    /* === 背景顏色 === */
    --bg-light: #f8f9fa;
    --bg-white: #fff;
    --bg-secondary: #e9ecef;
    --bg-muted: #f2f2f2;
    --bg-light-gray: #eee;
    --bg-gray: #666;

    /* === 邊框顏色 === */
    --border-light: #dee2e6;
    --border-primary: #c7cfad;
    --border-muted: #e9ecef;
    --border-secondary: #ccc;

    /* === 陰影顏色 === */
    --shadow-primary: rgba(139, 160, 69, 0.1);
    --shadow-primary-hover: rgba(139, 160, 69, 0.2);
    --shadow-primary-focus: rgba(139, 160, 69, 0.25);
    --shadow-dark: rgba(0, 0, 0, 0.1);
    --shadow-dark-hover: rgba(0, 0, 0, 0.15);

    /* === 表單相關顏色 === */
    --form-border: #c7cfad;
    --form-focus: #8ba045;
    --form-disabled-bg: #e9ecef;
    --form-error: #921b27ff;
    --form-warning: #e4bb3eff;
    --form-success: #28a745;

    /* === 按鈕顏色 === */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-border: var(--primary-color);
    --btn-primary-text: var(--text-primary);
    --btn-primary-hover-bg: var(--primary-hover);
    --btn-primary-hover-border: var(--primary-hover);
    --btn-primary-active-bg: var(--primary-dark);
    --btn-primary-active-border: var(--primary-dark);
    --btn-disabled-bg: #aaa;

    /* === 特殊用途顏色 === */
    --cart-badge-bg: #8ba045;
    --cart-badge-text: #fff;
    --store-select-bg: rgba(139, 160, 69, 0.25);
    --store-select-hover: #8ba045;
    --synced-field-bg: rgba(139, 160, 69, 0.25);
    --synced-field-border: #8ba045;

    /* === 透明度變體 === */
    --primary-10: rgba(139, 160, 69, 0.1);
    --primary-20: rgba(139, 160, 69, 0.2);
    --primary-25: rgba(139, 160, 69, 0.25);
    --primary-40: rgba(139, 160, 69, 0.4);
    --primary-50: rgba(139, 160, 69, 0.5);
    --primary-78: rgba(139, 160, 69, 0.78);

    /* === 漸層顏色 === */
    --gradient-shimmer: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );

    /* === 尺寸變數 === */
    --border-radius-sm: 4px;
    --border-radius: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;

    /* === 間距變數 === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;

    /* === 字體大小 === */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;

    /* === 字體權重 === */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* === 過渡效果 === */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* === Z-index 層級 === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 9999;
}

.alert {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    border: 1px solid;
    margin-bottom: 16px;
}

.alert-info {
    background-color: var(--info-bg) !important;
    color: var(--info-text) !important;
    border-color: var(--info-color) !important;
}

.alert-success {
    background-color: var(--success-bg) !important;
    color: var(--success-text) !important;
    border-color: var(--success-border) !important;
}

.alert-warning {
    background-color: var(--warning-bg) !important;
    color: var(--warning-text) !important;
    border-color: var(--warning-color) !important;
}

.alert-danger {
    background-color: var(--danger-bg) !important;
    color: var(--danger-text) !important;
    border-color: var(--danger-color) !important;
}