/**
 * 泰液·苏中液压 - 移动端全局CSS变量
 * 设计风格：高端工业App风格 - 深色主题 + 金色点缀
 * 适用于液压机械制造企业，传达专业、品质、可信赖的品牌形象
 */

:root {
  /* ==================== 核心品牌色 ==================== */
  /* 深蓝背景 - 工业、专业、沉稳 */
  --brand-deep: #050D18;
  --brand-primary: #0A1628;
  --brand-secondary: #1E3A5F;
  --brand-elevated: #284B6F;

  /* 金色点缀 - 品质、价值、信任 */
  --gold-primary: #D4AF37;
  --gold-light: #E8C547;
  --gold-dark: #B8962E;
  --gold-muted: rgba(212, 175, 55, 0.6);
  --gold-gradient: linear-gradient(135deg, #D4AF37 0%, #E8C547 50%, #B8962E 100%);
  --gold-shimmer: linear-gradient(90deg, #B8962E 0%, #D4AF37 25%, #E8C547 50%, #D4AF37 75%, #B8962E 100%);

  /* ==================== 功能色 ==================== */
  --accent-blue: #4A90D9;
  --accent-blue-light: #6BA8E8;
  --accent-red: #E94560;
  --accent-red-light: #FF6B7A;
  --accent-green: #10B981;
  --accent-green-light: #34D399;
  --accent-orange: #F59E0B;
  --accent-orange-light: #FBBF24;

  /* ==================== 背景色层级 ==================== */
  --bg-root: #050D18;
  --bg-primary: #0A1628;
  --bg-secondary: #162038;
  --bg-card: rgba(30, 58, 95, 0.6);
  --bg-card-hover: rgba(30, 58, 95, 0.8);
  --bg-card-active: rgba(40, 75, 111, 0.9);
  --bg-input: rgba(26, 47, 76, 0.5);
  --bg-overlay: rgba(5, 13, 24, 0.85);
  --bg-modal: rgba(10, 22, 40, 0.98);

  /* ==================== 文字色层级 ==================== */
  --text-primary: #FFFFFF;
  --text-secondary: #C4D4E8;
  --text-tertiary: #8B9DC3;
  --text-muted: #5A7A9C;
  --text-disabled: #3A5A7C;
  --text-inverse: #0A1628;
  --text-gold: #D4AF37;
  --text-link: #6BA8E8;

  /* ==================== 边框色 ==================== */
  --border-gold: rgba(212, 175, 55, 0.3);
  --border-gold-strong: rgba(212, 175, 55, 0.6);
  --border-subtle: rgba(139, 157, 195, 0.2);
  --border-medium: rgba(139, 157, 195, 0.4);
  --border-strong: rgba(139, 157, 195, 0.6);
  --border-focus: var(--gold-primary);

  /* ==================== 阴影系统 ==================== */
  --shadow-none: none;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.15);
  --shadow-gold-strong: 0 8px 32px rgba(212, 175, 55, 0.25);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(212, 175, 55, 0.3);

  /* ==================== 间距系统 ==================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ==================== 圆角系统 ==================== */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ==================== 字体系统 ==================== */
  /* 主字体 - 现代、专业、易读 */
  --font-display: "PingFang SC", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* 字号 - 移动端优化 */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 22px;
  --text-3xl: 26px;
  --text-4xl: 30px;
  --text-5xl: 36px;

  /* 行高 */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.8;

  /* 字重 */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* ==================== Z-index层级 ==================== */
  --z-base: 0;
  --z-above: 10;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
  --z-max: 9999;

  /* ==================== 动画时长 ==================== */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-slowest: 800ms;

  /* ==================== 缓动函数 ==================== */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ==================== 布局常量 ==================== */
  --header-height: 56px;
  --nav-height: 56px;
  --tab-height: 48px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --content-max-width: 1200px;
  --card-min-height: 80px;

  /* ==================== 特效变量 ==================== */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --saturate-hover: 1.1;
  --brightness-hover: 1.05;
  --scale-press: 0.98;
  --scale-hover: 1.02;
}

/* ==================== 深色主题（默认） ==================== */
[data-theme="dark"],
:root {
  color-scheme: dark;
}

/* ==================== 亮色主题（可选） ==================== */
[data-theme="light"] {
  --brand-deep: #F8FAFC;
  --brand-primary: #FFFFFF;
  --brand-secondary: #F1F5F9;
  --brand-elevated: #E2E8F0;

  --bg-root: #F8FAFC;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F1F5F9;
  --bg-card: rgba(241, 245, 249, 0.8);
  --bg-card-hover: rgba(226, 232, 240, 0.9);
  --bg-overlay: rgba(255, 255, 255, 0.9);

  --text-primary: #1E293B;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;

  --border-subtle: rgba(148, 163, 184, 0.3);
  --border-medium: rgba(148, 163, 184, 0.5);
  --border-strong: rgba(71, 85, 105, 0.6);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);

  color-scheme: light;
}

/* ==================== 响应式断点变量 ==================== */
@media (min-width: 320px) {
  :root { --breakpoint: 'xs'; }
}
@media (min-width: 375px) {
  :root { --breakpoint: 'sm'; }
}
@media (min-width: 414px) {
  :root { --breakpoint: 'md'; }
}
@media (min-width: 768px) {
  :root { --breakpoint: 'lg'; }
}

/* ==================== 打印优化 ==================== */
@media print {
  :root {
    --bg-primary: #FFFFFF;
    --text-primary: #000000;
  }
}