/**
 * Design Tokens - 深色渐变风格设计系统
 * 用途：视频总结文章网页
 * 创建日期：2025-01-25
 */

:root {
  /* ========== Colors ========== */

  /* Background Colors */
  --bg-primary: #0a0a0b;
  --bg-card: #141416;

  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-tertiary: #666666;

  /* Accent Colors */
  --accent-orange: #ff6b35;
  --accent-cyan: #00d4ff;
  --accent-gradient: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-cyan) 100%);

  /* UI Colors */
  --border: #2a2a2e;
  --border-hover: var(--accent-orange);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #ffffff 0%, #666666 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-cyan) 100%);
  --gradient-number: linear-gradient(180deg, var(--border) 0%, transparent 100%);

  /* Background Effects */
  --bg-glow-orange: radial-gradient(ellipse at top right, rgba(255, 107, 53, 0.1) 0%, transparent 50%);
  --bg-glow-cyan: radial-gradient(ellipse at bottom left, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
  --quote-bg: rgba(255, 107, 53, 0.05);

  /* ========== Typography ========== */

  /* Font Families */
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;

  /* Font Sizes */
  --font-size-hero: clamp(48px, 10vw, 120px);
  --font-size-section: clamp(32px, 5vw, 56px);
  --font-size-topic: clamp(24px, 4vw, 36px);
  --font-size-number: clamp(64px, 15vw, 120px);
  --font-size-body: 16px;
  --font-size-small: 12px;
  --font-size-tiny: 11px;

  /* Font Weights */
  --font-weight-normal: 300;
  --font-weight-medium: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-heavy: 800;

  /* Letter Spacing */
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: -0.02em;
  --letter-spacing-wide: 1.5px;
  --letter-spacing-wider: 2px;

  /* Line Heights */
  --line-height-tight: 0.95;
  --line-height-normal: 1.2;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.7;

  /* ========== Spacing ========== */

  /* Container */
  --container-max-width: 1400px;
  --container-padding: 24px;
  --container-padding-mobile: 20px;

  /* Section Padding */
  --section-padding-vertical: 120px;
  --section-padding-vertical-mobile: 80px;

  /* Component Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* Card Spacing */
  --card-padding: 40px;
  --card-gap: 24px;

  /* Content Spacing */
  --content-margin-bottom: 32px;
  --detail-margin-bottom: 24px;

  /* ========== Borders & Radius ========== */

  /* Border Widths */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* ========== Shadows ========== */

  --shadow-sm: 0 4px 20px rgba(255, 107, 53, 0.3);
  --shadow-md: 0 8px 30px rgba(255, 107, 53, 0.5);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.3);

  /* ========== Transitions ========== */

  --transition-fast: 0.3s ease;
  --transition-normal: 0.6s ease;

  /* ========== Animation Delays ========== */

  --delay-1: 0.1s;
  --delay-2: 0.2s;
  --delay-3: 0.3s;
  --delay-4: 0.4s;

  /* ========== Transform ========== */

  --hover-lift: translateY(-4px);
  --hover-lift-sm: translateY(-2px);

  /* ========== Z-Index ========== */

  --z-base: 1;
  --z-overlay: 10;
  --z-modal: 100;
}