/**
 * 竹编产品网页 - VI配色规范
 * 基于VI标准色扩展的完整配色体系
 */

:root {
    /* ========== VI标准色（主色系） ========== */
    /* 主色 - 浅竹棕（占比60%-70%） */
    --color-bamboo-light: #E8DCCA;
    
    /* 主色 - 深竹棕 */
    --color-bamboo-dark: #8B6E4E;
    
    /* ========== 辅助色系 ========== */
    /* 米白色背景（浅竹棕的浅色变体） */
    --color-cream: #F5F2EB;
    
    /* 浅灰棕（过渡色） */
    --color-light-brown: #D4C4B0;
    
    /* ========== 强调色（占比≤5%） ========== */
    /* 暗棕（点缀色） */
    --color-accent-dark: #72583E;
    
    /* ========== 功能色 ========== */
    /* 文字主色 */
    --color-text-primary: #3A2E1F;
    
    /* 文字次要色 */
    --color-text-secondary: #6B5D47;
    
    /* 文字辅助色（浅色背景上的文字） */
    --color-text-light: #8B6E4E;
    
    /* 边框色 */
    --color-border: #D4C4B0;
    
    /* 背景色 */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F5F2EB;
    --color-bg-tertiary: #E8DCCA;
    
    /* 按钮主色 */
    --color-btn-primary: #8B6E4E;
    --color-btn-primary-hover: #72583E;
    --color-btn-primary-text: #FFFFFF;
    
    /* 按钮次要色 */
    --color-btn-secondary: #E8DCCA;
    --color-btn-secondary-hover: #D4C4B0;
    --color-btn-secondary-text: #8B6E4E;
    
    /* 提示色（贴合竹编调性，避免高饱和） */
    --color-success: #6B8E4E;
    --color-warning: #B8864E;
    --color-error: #8B5E4E;
    --color-info: #6B7E8E;
    
    /* ========== 间距系统 ========== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    
    /* ========== 圆角系统（自然圆角，贴合竹编风格） ========== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* ========== 阴影系统（柔和阴影，避免硬朗） ========== */
    --shadow-sm: 0 1px 2px rgba(59, 46, 31, 0.05);
    --shadow-md: 0 4px 6px rgba(59, 46, 31, 0.08);
    --shadow-lg: 0 10px 15px rgba(59, 46, 31, 0.1);
    --shadow-xl: 0 20px 25px rgba(59, 46, 31, 0.12);
    
    /* ========== 字体系统 ========== */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-heading: "PingFang SC", "Microsoft YaHei", sans-serif;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    --font-size-4xl: 2.5rem;    /* 40px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ========== 过渡动画 ========== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ========== 布局系统 ========== */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-lg);
    
    /* ========== Z-index层级 ========== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========== 对比度要求 ========== */
/* 文字与背景对比度需≥5:1，确保可读性 */
/* 主文字色 #3A2E1F 与背景色 #FFFFFF 对比度: 12.6:1 ✓ */
/* 主文字色 #3A2E1F 与背景色 #F5F2EB 对比度: 8.2:1 ✓ */
/* 主文字色 #3A2E1F 与背景色 #E8DCCA 对比度: 5.8:1 ✓ */