/* ============================================================
   CloudEngine 企业官网 - 设计令牌与全局基础
   ============================================================ */

:root {
  /* —— 品牌色 —— */
  --color-primary: #0066FF;
  --color-primary-deep: #0044CC;
  --color-accent: #00D4FF;
  --color-secondary: #7C3AED;
  --color-success: #10B981;
  --color-warning: #F59E0B;

  /* —— 背景与表面 —— */
  --color-bg-dark: #0A0E27;
  --color-bg-darker: #060818;
  --color-bg-card: #131836;
  --color-bg-card-hover: #1A2147;
  --color-bg-glass: rgba(19, 24, 54, 0.6);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(0, 212, 255, 0.3);

  /* —— 文字 —— */
  --color-text: #E6EAF2;
  --color-text-strong: #FFFFFF;
  --color-text-muted: #8B92A8;
  --color-text-dim: #5A6378;

  /* —— 渐变 —— */
  --gradient-primary: linear-gradient(135deg, #0066FF 0%, #00D4FF 100%);
  --gradient-secondary: linear-gradient(135deg, #7C3AED 0%, #0066FF 100%);
  --gradient-hero: radial-gradient(ellipse at top, rgba(0, 102, 255, 0.15) 0%, transparent 60%),
                   radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.12) 0%, transparent 50%);
  --gradient-text: linear-gradient(135deg, #00D4FF 0%, #0066FF 50%, #7C3AED 100%);
  --gradient-border: linear-gradient(135deg, rgba(0, 212, 255, 0.5), rgba(124, 58, 237, 0.3));

  /* —— 阴影 —— */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 24px rgba(0, 212, 255, 0.4);
  --shadow-glow-strong: 0 0 48px rgba(0, 212, 255, 0.6);

  /* —— 圆角 —— */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* —— 间距 —— */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* —— 字体 —— */
  --font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  --fs-5xl: 56px;
  --fs-6xl: 72px;
  --lh-base: 1.75;
  --lh-tight: 1.3;

  /* —— 布局 —— */
  --max-width: 1200px;
  --header-height: 72px;
  --header-height-scrolled: 60px;

  /* —— 过渡 —— */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-base: 0.3s var(--ease-out);
  --transition-slow: 0.6s var(--ease-out);
}

/* —— 重置 —— */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: 700; }

/* —— 容器 —— */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }

/* —— 文字工具 —— */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }

/* —— 滚动条 —— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-darker); }
::-webkit-scrollbar-thumb { background: var(--color-bg-card-hover); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* —— 选中 —— */
::selection { background: var(--color-accent); color: var(--color-bg-dark); }

/* —— 响应式 —— */
@media (max-width: 1199px) { :root { --space-2xl: 48px; --space-3xl: 72px; } }
@media (max-width: 767px) {
  :root {
    --fs-base: 14px;
    --fs-5xl: 40px;
    --fs-6xl: 48px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
  }
}