/* ============================================
   CSS 变量系统 - 浙江宁轩建筑装饰工程有限公司
   ============================================ */

:root {
    /* ===== 颜色变量 ===== */
    --color-primary: #3b1c5a;           /* 深紫 - 主色 */
    --color-primary-light: #6741a0;     /* 深紫浅色 */
    --color-primary-dark: #251137;      /* 深紫深色 */
    
    --color-accent: #f5c98f;            /* 香槟金 - 辅色 */
    --color-accent-light: #ffe4b5;      /* 香槟金浅色 */
    --color-accent-dark: #d89b4a;       /* 香槟金深色 */
    
    --color-background: #f8f8ff;        /* 珍珠白 - 页面背景 */
    --color-background-light: #ffffff;  /* 纯白 - 卡片背景 */
    --color-background-dark: #ece8f5;   /* 淡紫灰 - 分割线 */
    
    --color-text-dark: #2b2336;         /* 深灰紫 - 正文 */
    --color-text-light: #5a4c6b;        /* 暗紫灰 - 次要信息 */
    --color-text-lighter: #8f85a2;      /* 浅紫灰 - 辅助信息 */
    --color-white: #ffffff;             /* 纯白 */
    
    --color-success: #38b2ac;           /* 青绿 */
    --color-warning: #f6ad55;           /* 琥珀橙 */
    --color-error: #e53e3e;             /* 绯红 */
    --color-info: #6b46c1;              /* 靛紫 */

    /* ===== 字体变量 ===== */
    --font-family-main: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
    --font-family-heading: "Microsoft YaHei", "PingFang SC", sans-serif;
    --font-family-mono: "Courier New", monospace;
    
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    
    --font-size-h1: 2.5rem;             /* 40px */
    --font-size-h2: 2rem;               /* 32px */
    --font-size-h3: 1.5rem;             /* 24px */
    --font-size-h4: 1.25rem;            /* 20px */
    --font-size-h5: 1.125rem;           /* 18px */
    --font-size-h6: 1rem;               /* 16px */
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ===== 行高与字间距 ===== */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;

    /* ===== 间距变量 (基于 8px 的倍数系统) ===== */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 96px;
    --spacing-4xl: 128px;

    /* ===== 圆角变量 ===== */
    --border-radius-xs: 2px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    /* ===== 阴影变量 ===== */
    --box-shadow-xs: 0 1px 2px rgba(37, 17, 55, 0.08);
    --box-shadow-sm: 0 2px 6px rgba(37, 17, 55, 0.12);
    --box-shadow-md: 0 6px 18px rgba(59, 28, 90, 0.16);
    --box-shadow-lg: 0 12px 28px rgba(37, 17, 55, 0.2);
    --box-shadow-xl: 0 18px 36px rgba(37, 17, 55, 0.25);
    --box-shadow-hover: 0 14px 32px rgba(103, 65, 160, 0.25);

    /* ===== 边框变量 ===== */
    --border-width-thin: 1px;
    --border-width-normal: 2px;
    --border-width-thick: 4px;
    --border-color: #ded6ea;
    --border-color-light: #efe9f7;
    --border-color-dark: #c2b5da;

    /* ===== 过渡与动画 ===== */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;

    /* ===== 布局变量 ===== */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-lg);
    --navbar-height: 80px;
    --navbar-height-mobile: 60px;
    --grid-gap: var(--spacing-md);

    /* ===== Z-Index 堆叠顺序 ===== */
    --z-dropdown: 100;
    --z-navbar: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
}

/* ===== 响应式断点 ===== */
/* 超小屏幕 (手机) */
@media (max-width: 576px) {
    :root {
        --font-size-base: 14px;
        --font-size-h1: 1.75rem;
        --font-size-h2: 1.5rem;
        --font-size-h3: 1.25rem;
        --container-padding: var(--spacing-sm);
        --navbar-height: var(--navbar-height-mobile);
        --grid-gap: var(--spacing-sm);
    }
}

/* 小屏幕 (平板) */
@media (min-width: 577px) and (max-width: 768px) {
    :root {
        --font-size-base: 15px;
        --font-size-h1: 2rem;
        --font-size-h2: 1.75rem;
        --font-size-h3: 1.375rem;
        --container-padding: var(--spacing-md);
    }
}

/* 中等屏幕 (小型桌面) */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --container-max-width: 960px;
    }
}

/* 大屏幕 (桌面) */
@media (min-width: 1025px) {
    :root {
        --container-max-width: 1200px;
    }
}

/* 超大屏幕 (大型桌面) */
@media (min-width: 1441px) {
    :root {
        --container-max-width: 1400px;
    }
}