/* ============================================
   DAWA.AI - CSS Variables (Design System)
   Industrial AI Video Generation Platform
   World-Class UI/UX Design
   ============================================ */

:root {
  /* ========== Color System - Future Tech Cyan/Blue ========== */
  /* Primary - Electric Cyan Spectrum (主色调：青蓝色) */
  --color-primary-50: #ecfeff;
  --color-primary-100: #cffafe;
  --color-primary-200: #a5f3fc;
  --color-primary-300: #67e8f9;
  --color-primary-400: #22d3ee;   /* 亮青色 */
  --color-primary-500: #06b6d4;
  --color-primary-600: #0891b2;
  --color-primary-700: #0e7490;
  --color-primary-800: #155e75;
  --color-primary-900: #164e63;

  /* Accent - Electric Blue (电光蓝主色) */
  --color-accent-200: #b6f5ff;
  --color-accent-300: #67e8f9;
  --color-accent-400: #00d4ff;    /* 核心电光蓝 */
  --color-accent-500: #00c3ff;
  --color-accent-600: #00a2d4;
  --color-accent-700: #0082b2;
  --color-accent-800: #006a94;

  /* Neon Blue - Ultra Bright (霓虹蓝) */
  --color-neon-400: #00f0ff;
  --color-neon-500: #00e0ff;

  /* Gold Accent - Premium Highlights */
  --color-gold-400: #fbbf24;
  --color-gold-500: #f59e0b;
  --color-gold-600: #d97706;

  /* ========== Premium Gradients - Future Tech Cyan/Blue ========== */
  --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #00a2d4 50%, #0082b2 100%);
  --gradient-primary-hover: linear-gradient(135deg, #00f0ff 0%, #00d4ff 50%, #00c3ff 100%);
  --gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.2) 0%, transparent 50%),
                   radial-gradient(ellipse at 80% 50%, rgba(0, 162, 212, 0.15) 0%, transparent 40%),
                   radial-gradient(ellipse at 20% 80%, rgba(0, 240, 255, 0.1) 0%, transparent 40%);
  --gradient-card: linear-gradient(145deg, rgba(10, 14, 26, 0.9) 0%, rgba(13, 17, 23, 0.7) 100%);
  --gradient-glow: radial-gradient(circle at center, rgba(0, 212, 255, 0.5) 0%, transparent 70%);
  --gradient-text: linear-gradient(90deg, #00d4ff 0%, #00f0ff 50%, #00a2d4 100%);
  --gradient-border: linear-gradient(135deg, rgba(0, 212, 255, 0.6) 0%, rgba(0, 240, 255, 0.4) 100%);
  --gradient-mesh: radial-gradient(at 40% 20%, hsla(190, 100%, 50%, 0.35) 0px, transparent 50%),
                   radial-gradient(at 80% 0%, hsla(190, 100%, 45%, 0.25) 0px, transparent 50%),
                   radial-gradient(at 0% 50%, hsla(190, 100%, 40%, 0.25) 0px, transparent 50%),
                   radial-gradient(at 80% 50%, hsla(190, 100%, 35%, 0.2) 0px, transparent 50%),
                   radial-gradient(at 0% 100%, hsla(190, 90%, 45%, 0.2) 0px, transparent 50%);
  --gradient-neon: linear-gradient(135deg, #00f0ff 0%, #00d4ff 100%);

  /* ========== Dark Theme - Future Tech Cyan/Blue ========== */
  --bg-dark: #050810;           /* 深邃黑蓝背景 */
  --bg-dark-secondary: #0a0f1c;  /* 次级深色背景 */
  --bg-dark-tertiary: #0f1724;   /* 第三级深色 */
  --bg-card: rgba(10, 15, 28, 0.7);
  --bg-card-hover: rgba(15, 23, 42, 0.85);
  --bg-card-solid: #0a0f1c;
  --bg-input: rgba(10, 15, 28, 0.6);
  --bg-modal: rgba(5, 8, 16, 0.95);
  --bg-highlight: rgba(0, 212, 255, 0.12);

  /* Overflow Control */
  --overflow-x: hidden;

  /* ========== Glassmorphism - Premium Future Tech ========== */
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-bg-light: rgba(0, 212, 255, 0.04);
  --glass-bg-strong: rgba(0, 212, 255, 0.08);
  --glass-bg-card: rgba(10, 20, 35, 0.5);
  --glass-border: rgba(0, 212, 255, 0.08);
  --glass-border-light: rgba(0, 212, 255, 0.12);
  --glass-border-strong: rgba(0, 212, 255, 0.2);
  --glass-blur: blur(24px);
  --glass-blur-heavy: blur(48px);

  /* ========== Glow Effects - Future Tech Cyan/Blue ========== */
  --glow-primary: 0 0 50px rgba(0, 212, 255, 0.4), 0 0 100px rgba(0, 212, 255, 0.2);
  --glow-primary-strong: 0 0 80px rgba(0, 212, 255, 0.5), 0 0 160px rgba(0, 212, 255, 0.3);
  --glow-accent: 0 0 40px rgba(0, 224, 255, 0.4), 0 0 80px rgba(0, 224, 255, 0.2);
  --glow-neon: 0 0 50px rgba(0, 240, 255, 0.5), 0 0 100px rgba(0, 240, 255, 0.3);
  --glow-gold: 0 0 25px rgba(251, 191, 36, 0.4);
  --glow-card: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 212, 255, 0.1);
  --glow-card-hover: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 212, 255, 0.15);
  --glow-text: 0 0 25px rgba(0, 212, 255, 0.7), 0 0 50px rgba(0, 212, 255, 0.3);
  --glow-button: 0 0 40px rgba(0, 212, 255, 0.5), 0 0 80px rgba(0, 212, 255, 0.25);

  /* ========== Text Colors - Refined Contrast ========== */
  --text-primary: #ffffff;
  --text-secondary: #e4e4e7;
  --text-muted: #9ca3af;     /* 提升灰度文字可见度 */
  --text-placeholder: #6b7280;
  --text-inverse: #000814;
  --text-gradient: linear-gradient(90deg, #ffffff 0%, #00d4ff 100%);

  /* ========== Border Colors - Cyan/Blue Theme ========== */
  --border-color: rgba(0, 212, 255, 0.08);
  --border-color-light: rgba(0, 212, 255, 0.12);
  --border-color-strong: rgba(0, 212, 255, 0.25);
  --border-gradient: linear-gradient(135deg, rgba(0, 212, 255, 0.4) 0%, rgba(0, 240, 255, 0.3) 100%);
  --border-focus: rgba(0, 212, 255, 0.6);

  /* ========== Shadows - Premium Depth ========== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 24px 80px rgba(0, 0, 0, 0.45);
  --shadow-inner: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.4);

  /* ========== Transitions - Smooth Premium ========== */
  --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ========== Border Radius ========== */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ========== Spacing ========== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  --spacing-5xl: 128px;

  /* ========== Font Sizes - Refined Scale ========== */
  --font-xs: 0.7rem;      /* 11.2px - 精致小字 */
  --font-sm: 0.8125rem;   /* 13px - 辅助文字 */
  --font-base: 0.9375rem; /* 15px - 正文 */
  --font-lg: 1.0625rem;   /* 17px - 大正文 */
  --font-xl: 1.1875rem;   /* 19px - 小标题 */
  --font-2xl: 1.375rem;   /* 22px - 中标题 */
  --font-3xl: 1.625rem;   /* 26px - 大标题 */
  --font-4xl: 2rem;       /* 32px - 超大标题 */
  --font-5xl: 2.5rem;     /* 40px - 巨型标题 */
  --font-6xl: 3.25rem;    /* 52px - 展示标题 */
  --font-7xl: 4.5rem;     /* 72px - 英雄标题 */

  /* ========== Font Weights ========== */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* ========== Line Heights - Refined ========== */
  --line-tight: 1.15;      /* 紧凑标题 */
  --line-normal: 1.55;     /* 标准正文 */
  --line-relaxed: 1.75;    /* 宽松阅读 */
  --line-loose: 2.1;       /* 超大行高 */

  /* ========== Letter Spacing ========== */
  --letter-tight: -0.03em;  /* 紧凑字间距 */
  --letter-normal: 0;       /* 标准字间距 */
  --letter-relaxed: 0.02em; /* 宽松字间距 */
  --letter-wide: 0.05em;    /* 加宽字间距 */
  --letter-wide-2: 0.1em;   /* 超大字间距 */

  /* ========== Z-Index Scale ========== */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --z-preloader: 9999;

  /* ========== Container Widths ========== */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;

  /* ========== Section Spacing ========== */
  --section-padding: 120px;
  --section-padding-mobile: 80px;

  /* ========== Animation Durations ========== */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  --duration-hero: 1200ms;
}

/* ========== Typography Font Family ========== */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: var(--font-base);
  line-height: var(--line-normal);
  color: var(--text-primary);
  background-color: var(--bg-dark);
  letter-spacing: var(--letter-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== Heading Styles ========== */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--letter-tight);
  text-transform: none;
}

/* ========== Large Heading Enhancement ========== */
h1 { letter-spacing: -0.04em; }
h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.02em; }

/* ========== Selection Colors ========== */
::selection {
  background: rgba(0, 212, 255, 0.3);
  color: var(--text-primary);
}

::-moz-selection {
  background: rgba(0, 212, 255, 0.3);
  color: var(--text-primary);
}