/* ========================================
   四川瑞泽科技 - CSS变量系统
   ======================================== */

:root {
  /* ===== 颜色变量 ===== */
  /* 主色调：清水蓝 */
  --color-primary: #0288d1;
  --color-primary-light: #5eb8ff;
  --color-primary-dark: #01579b;
  
  /* 辅色调：生态绿 */
  --color-secondary: #00695c;
  --color-secondary-light: #26a69a;
  --color-secondary-dark: #004c3f;
  
  /* 点缀色：碧波青 */
  --color-accent: #26c6da;
  --color-accent-light: #66e0ed;
  --color-accent-dark: #0097a7;
  
  /* 中性色 */
  --color-white: #ffffff;
  --color-light-gray: #f5f5f5;
  --color-gray: #e0e0e0;
  --color-dark-gray: #999999;
  --color-text-light: #666666;
  --color-text-dark: #333333;
  --color-text-darkest: #1a1a1a;
  --color-black: #000000;
  
  /* 背景色 */
  --color-background-light: #e3f2fd;
  --color-background-gray: #f5fbff;
  --color-background-dark: #cfe8ff;
  --color-background-deep: #022c43;
  --color-overlay: rgba(2, 136, 209, 0.08);
  
  /* 状态色 */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;
  
  /* ===== 字体变量 ===== */
  --font-family-main: 'Segoe UI', 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-family-heading: 'Segoe UI', 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  --font-family-code: 'Courier New', 'Courier', monospace;
  
  /* ===== 字体大小 ===== */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  
  /* ===== 字体粗细 ===== */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* ===== 行高 ===== */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  /* ===== 间距变量 ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  
  /* ===== 圆角变量 ===== */
  --border-radius-none: 0;
  --border-radius-sm: 4px;
  --border-radius-base: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;
  
  /* ===== 阴影变量 ===== */
  --box-shadow-none: none;
  --box-shadow-sm: 0 5px 15px rgba(1, 87, 155, 0.08);
  --box-shadow-base: 0 10px 30px rgba(1, 87, 155, 0.12);
  --box-shadow-md: 0 20px 40px rgba(2, 136, 209, 0.18);
  --box-shadow-lg: 0 30px 50px rgba(0, 73, 118, 0.25);
  --box-shadow-xl: 0 40px 80px rgba(0, 73, 118, 0.35);
  --box-shadow-2xl: 0 50px 80px rgba(0, 41, 66, 0.45);
  
  /* 内凹阴影（用于卡片效果） */
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* ===== 过渡/动画 ===== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* ===== 边框 ===== */
  --border-width-thin: 1px;
  --border-width-base: 2px;
  --border-width-thick: 3px;
  --border-color-light: rgba(2, 136, 209, 0.15);
  --border-color-base: rgba(0, 105, 92, 0.25);
  --border-color-dark: rgba(0, 73, 118, 0.45);

  /* ===== 渐变与纹理 ===== */
  --gradient-water: linear-gradient(135deg, rgba(2, 136, 209, 0.95), rgba(0, 105, 92, 0.95));
  --gradient-flow: linear-gradient(110deg, rgba(38, 230, 218, 0.45), rgba(2, 136, 209, 0.4));
  --gradient-night: linear-gradient(135deg, #021b2d, #034059);
  --gradient-sunrise: linear-gradient(135deg, #5ad1ff, #3fb8af);
  --texture-light: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.6), transparent 45%);
  
  /* ===== 容器宽度 ===== */
  --container-xs: 320px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  /* ===== Z-index层级 ===== */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

/* ===== 响应式断点 ===== */
@media (max-width: 640px) {
  :root {
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-base: 13px;
    --font-size-lg: 15px;
    --font-size-xl: 17px;
    --font-size-2xl: 19px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
  }
}