/* ============================================================
   tokens.css - 设计令牌 (CSS Custom Properties)
   深邃科技 Pro v1.0
   
   用途: 全站共享的设计变量，必须最先加载
   依赖: 无
   ============================================================ */

:root {
  /* ===========================================
     品牌主色 - 深邃墨绿
     =========================================== */
  --color-primary: #0d9488;
  --color-primary-hover: #0f766e;
  --color-primary-active: #115e59;
  --color-primary-light: #e6f7f5;
  --color-primary-lighter: #f0fdf9;
  --color-primary-dark: #134e4a;

  /* ===========================================
     点缀色 - 金铜暖调
     =========================================== */
  --color-secondary: #57534e;
  --color-secondary-hover: #44403c;
  --color-secondary-light: #f5f5f4;
  --color-accent: #d97706;
  --color-accent-hover: #b45309;
  --color-accent-light: #fef3e2;
  --color-accent-secondary: #0891b2;
  --color-accent-secondary-light: #e6f7fa;

  /* ===========================================
     语义色
     =========================================== */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-light: #d1fae5;
  --color-success-lighter: #ecfdf5;
  --color-success-dark: #047857;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-light: #fef3c7;
  --color-warning-lighter: #fffbeb;
  --color-warning-dark: #b45309;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-light: #fee2e2;
  --color-danger-lighter: #fef2f2;
  --color-danger-dark: #b91c1c;
  --color-info: #0891b2;
  --color-info-hover: #0e7490;
  --color-info-light: #cffafe;
  --color-info-lighter: #ecfeff;
  --color-info-dark: #155e75;

  /* ===========================================
     浅色背景体系
     =========================================== */
  --color-text: #1c1917;
  --color-text-secondary: #57534e;
  --color-text-muted: #a8a29e;
  --color-text-placeholder: #d6d3d1;
  --color-text-inverse: #fafaf9;
  --color-text-inverse-secondary: rgba(250, 250, 249, 0.7);
  --color-text-inverse-muted: rgba(250, 250, 249, 0.5);
  --color-bg: #fafaf9;
  --color-bg-secondary: #f5f5f4;
  --color-bg-tertiary: #e7e5e4;
  --color-bg-quaternary: #d6d3d1;

  /* ===========================================
     深色背景体系
     =========================================== */
  --color-bg-dark: #1c1917;
  --color-bg-darker: #0c0a09;
  --color-bg-darkest: #040302;

  /* ===========================================
     边框
     =========================================== */
  --color-border: #e7e5e4;
  --color-border-light: #f5f5f4;
  --color-border-dark: #d6d3d1;
  --color-border-focus: #0d9488;
  --color-overlay: rgba(28, 25, 23, 0.6);
  --color-overlay-light: rgba(28, 25, 23, 0.3);

  /* 深色模式微光边框 */
  --color-border-glow: rgba(250, 250, 249, 0.08);
  --color-border-glow-hover: rgba(250, 250, 249, 0.15);
  --color-border-glow-primary: rgba(13, 148, 136, 0.3);

  /* ===========================================
     Alpha 透明色
     =========================================== */
  --color-white-5: rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-black-5: rgba(0, 0, 0, 0.05);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-60: rgba(0, 0, 0, 0.6);

  /* ===========================================
     渐变
     =========================================== */
  --color-gradient-primary: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  --color-gradient-primary-shine: linear-gradient(135deg, #14b8a6 0%, #0d9488 40%, #0f766e 100%);
  --color-gradient-tech: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
  --color-gradient-dark: linear-gradient(180deg, #1c1917 0%, #0c0a09 100%);

  /* Hero区多层光斑渐变 */
  --color-gradient-radial: 
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(13, 148, 136, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(217, 119, 6, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(8, 145, 178, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #1c1917 0%, #0c0a09 100%);

  /* CTA区渐变 */
  --color-gradient-cta:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(13, 148, 136, 0.2) 0%, transparent 50%),
    linear-gradient(180deg, #1c1917 0%, #0c0a09 100%);

  /* ===========================================
     玻璃拟态
     =========================================== */
  --glass-bg: rgba(250, 250, 249, 0.7);
  --glass-bg-light: rgba(250, 250, 249, 0.85);
  --glass-bg-dark: rgba(28, 25, 23, 0.8);
  --glass-border: rgba(250, 250, 249, 0.2);
  --glass-border-dark: rgba(250, 250, 249, 0.08);
  --glass-blur: 20px;

  /* ===========================================
     间距
     =========================================== */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  /* ===========================================
     字体
     =========================================== */
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;

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

  /* ===========================================
     阴影
     =========================================== */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 2px 4px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.1), 0 4px 8px rgba(28, 25, 23, 0.06);
  --shadow-xl: 0 24px 48px rgba(28, 25, 23, 0.14), 0 8px 16px rgba(28, 25, 23, 0.08);
  --shadow-2xl: 0 32px 64px rgba(28, 25, 23, 0.18);
  --shadow-inner: inset 0 2px 4px rgba(28, 25, 23, 0.05);

  /* 发光阴影 */
  --shadow-glow-primary: 0 8px 32px rgba(13, 148, 136, 0.25), 0 4px 12px rgba(13, 148, 136, 0.15);
  --shadow-glow-accent: 0 8px 32px rgba(217, 119, 6, 0.25), 0 4px 12px rgba(217, 119, 6, 0.15);
  --shadow-glow-white: 0 0 20px rgba(250, 250, 249, 0.1);

  /* 卡片阴影 */
  --shadow-card: 0 4px 16px rgba(28, 25, 23, 0.06);
  --shadow-card-hover: 0 12px 40px rgba(28, 25, 23, 0.12), 0 4px 12px rgba(13, 148, 136, 0.06);

  /* 聚焦阴影 */
  --shadow-focus: 0 0 0 3px rgba(13, 148, 136, 0.15);
  --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.15);

  /* 内发光 */
  --inset-glow: inset 0 1px 0 rgba(250, 250, 249, 0.1);
  --inset-glow-strong: inset 0 1px 0 rgba(250, 250, 249, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.05);

  /* ===========================================
     过渡动效
     =========================================== */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --easing-linear: linear;
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 组合过渡 */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===========================================
     布局容器
     =========================================== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* ===========================================
     Header 高度（用于 sticky 组件 top 计算）
     =========================================== */
  --header-height: 64px;

  /* ===========================================
     Z-Index 层级体系
     
     层级说明:
     - z-base (0): 普通内容
     - z-dropdown (100): 下拉菜单
     - z-sticky (200): 粘性元素（侧边栏、表格 sticky）
     - z-header (250): 页头（高于普通 sticky）
     - z-sticky-header (260): 页内 sticky header（如 compare 表头）
     - z-fixed (300): 固定元素（返回顶部、悬浮按钮）
     - z-drawer (350): 抽屉导航
     - z-overlay (400): 遮罩层
     - z-modal (500): 弹窗
     - z-popover (600): 气泡
     - z-toast (700): 提示
     - z-tooltip (800): 工具提示
     =========================================== */
  --z-hide: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 250;
  --z-sticky-header: 260;
  --z-fixed: 300;
  --z-drawer: 350;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-toast: 700;
  --z-tooltip: 800;

  /* ===========================================
     宽高比
     =========================================== */
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-card: 3 / 2;
  --aspect-product: 6 / 7;  /* 产品卡片 */

  /* ===========================================
     图标尺寸
     =========================================== */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 48px;
  --icon-xxl: 64px;
}

/* ===========================================
   响应式变量覆盖
   =========================================== */

/* 平板端 (768px+) */
@media (min-width: 768px) {
  :root {
    --header-height: 72px;
  }
}

/* 桌面端 (1024px+) */
@media (min-width: 1024px) {
  :root {
    --header-height: 72px;
  }
}

/* ============================================================
   R14: 全局遮罩/阴影/半透明变量
   ============================================================ */
:root {
  /* 遮罩层 */
  --overlay-black-05: rgba(0, 0, 0, 0.05);
  --overlay-black-08: rgba(0, 0, 0, 0.08);
  --overlay-black-10: rgba(0, 0, 0, 0.1);
  --overlay-black-25: rgba(0, 0, 0, 0.25);
  --overlay-black-50: rgba(0, 0, 0, 0.5);
  --overlay-black-60: rgba(0, 0, 0, 0.6);
  --overlay-black-70: rgba(0, 0, 0, 0.7);
  
  /* 白色半透明 */
  --overlay-white-05: rgba(255, 255, 255, 0.05);
  --overlay-white-10: rgba(255, 255, 255, 0.1);
  --overlay-white-15: rgba(255, 255, 255, 0.15);
  --overlay-white-40: rgba(255, 255, 255, 0.4);
  --overlay-white-50: rgba(255, 255, 255, 0.5);
  --overlay-white-60: rgba(255, 255, 255, 0.6);
  --overlay-white-65: rgba(255, 255, 255, 0.65);
  --overlay-white-85: rgba(255, 255, 255, 0.85);
  --overlay-white-90: rgba(255, 255, 255, 0.9);
  
  /* 主题色半透明 */
  --overlay-primary-10: rgba(13, 148, 136, 0.1);
  --overlay-primary-15: rgba(13, 148, 136, 0.15);
  --overlay-primary-20: rgba(13, 148, 136, 0.2);
  --overlay-primary-30: rgba(13, 148, 136, 0.3);
  --overlay-primary-40: rgba(13, 148, 136, 0.4);
  --overlay-primary-50: rgba(13, 148, 136, 0.5);
  
  /* 文本色半透明 */
  --overlay-text-06: rgba(28, 25, 23, 0.06);
  --overlay-text-08: rgba(28, 25, 23, 0.08);
  --overlay-text-10: rgba(28, 25, 23, 0.1);
  
  /* 边框半透明 */
  --border-light-80: rgba(231, 229, 228, 0.8);
  
  /* 预设阴影 */
  --shadow-float: 0 4px 12px var(--overlay-text-10), 0 2px 4px var(--overlay-text-06);
  --shadow-popup: 0 25px 50px -12px var(--overlay-black-25);
  --shadow-mobile-bar: 0 -2px 10px var(--overlay-black-08);
  --shadow-card-hover: 0 4px 20px var(--overlay-primary-10);
}