/**
 * Design Tokens - 深色渐变风格设计系统
 * 用途：视频总结文章网页
 * 创建日期：2025-01-25
 *
 * ========== 配色方案 ==========
 *
 * 生成文章时，随机选择一套配色方案，替换 :root 中的强调色变量。
 * 只需要替换 5 个变量，其余样式自动继承。
 *
 * ┌─────────────┬────────────────┬────────────────┐
 * │ 方案        │ --accent-primary │ --accent-secondary │
 * ├─────────────┼────────────────┼────────────────┤
 * │ 1. 橙青     │ #ff6b35        │ #00d4ff        │
 * │ 2. 紫粉     │ #a855f7        │ #ec4899        │
 * │ 3. 绿黄     │ #22c55e        │ #eab308        │
 * │ 4. 蓝靛     │ #ff4081        │ #3b82f6        │
 * │ 5. 珊瑚金   │ #f97066        │ #fbbf24        │
 * │ 6. 青紫     │ #14b8a6        │ #a78bfa        │
 * └─────────────┴────────────────┴────────────────┘
 *
 * 每套方案对应的 rgba 值（用于 glow / quote-bg / shadow）：
 * 见下方各方案的注释。
 */

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

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

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

  /*
   * ========== 配色方案（随机选一套，替换下面 5 个变量） ==========
   *
   * 方案 1: 橙青（默认）
   */
  --accent-primary: #ff6b35;
  --accent-secondary: #00d4ff;
  --accent-primary-rgb: 255, 107, 53;
  --accent-secondary-rgb: 0, 212, 255;

  /*
   * 方案 2: 紫粉
   * --accent-primary: #a855f7;
   * --accent-secondary: #ec4899;
   * --accent-primary-rgb: 168, 85, 247;
   * --accent-secondary-rgb: 236, 72, 153;
   */

  /*
   * 方案 3: 绿黄
   * --accent-primary: #22c55e;
   * --accent-secondary: #eab308;
   * --accent-primary-rgb: 34, 197, 94;
   * --accent-secondary-rgb: 234, 179, 8;
   */

  /*
   * 方案 4: 蓝靛
   * --accent-primary: #ff4081;
   * --accent-secondary: #3b82f6;
   * --accent-primary-rgb: 255, 64, 129;
   * --accent-secondary-rgb: 59, 130, 246;
   */

  /*
   * 方案 5: 珊瑚金
   * --accent-primary: #f97066;
   * --accent-secondary: #fbbf24;
   * --accent-primary-rgb: 249, 112, 102;
   * --accent-secondary-rgb: 251, 191, 36;
   */

  /*
   * 方案 6: 青紫
   * --accent-primary: #14b8a6;
   * --accent-secondary: #a78bfa;
   * --accent-primary-rgb: 20, 184, 166;
   * --accent-secondary-rgb: 167, 139, 250;
   */

  /* Accent Colors（自动继承，不需要手动改） */
  --accent-gradient: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);

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

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

  /* Background Effects（自动继承 rgb 变量，不需要手动改） */
  --bg-glow-primary: radial-gradient(ellipse at top right, rgba(var(--accent-primary-rgb), 0.1) 0%, transparent 50%);
  --bg-glow-secondary: radial-gradient(ellipse at bottom left, rgba(var(--accent-secondary-rgb), 0.08) 0%, transparent 50%);
  --quote-bg: rgba(var(--accent-primary-rgb), 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(var(--accent-primary-rgb), 0.3);
  --shadow-md: 0 8px 30px rgba(var(--accent-primary-rgb), 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;
}