/**
 * DevCraft Studio - 新配色系统
 * 深蓝灰专业风主题
 */

/* ==================== Light Mode ==================== */
:root {
  /* 背景色 */
  --theme: #F8FAFC;              /* 浅灰蓝背景 */
  --entry: #FFFFFF;              /* 纯白卡片 */
  --code-bg: #F1F5F9;            /* 浅灰代码背景 */
  --code-block-bg: #1E293B;      /* 深色代码块 */

  /* 文本色 */
  --primary: #1E3A8A;            /* 深蓝主色 */
  --secondary: #64748B;          /* 石板灰副色 */
  --tertiary: #E2E8F0;           /* 浅灰三级 */
  --content: #1E293B;            /* 深灰内容 */

  /* 强调色 */
  --accent: #3B82F6;             /* 蓝色强调 */
  --accent-2: #0EA5E9;           /* 天蓝辅助 */
  --success: #10B981;            /* 绿色成功 */
  --warning: #F59E0B;            /* 橙色警告 */
  --error: #EF4444;              /* 红色错误 */

  /* 边框和阴影 */
  --border: #E2E8F0;             /* 浅灰边框 */
  --shadow-sm: 0 2px 8px rgba(30, 58, 138, 0.08);
  --shadow-md: 0 4px 16px rgba(30, 58, 138, 0.12);
  --shadow-lg: 0 8px 32px rgba(30, 58, 138, 0.16);
  --shadow-xl: 0 12px 48px rgba(30, 58, 138, 0.2);

  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%);
  --gradient-secondary: linear-gradient(135deg, #60A5FA 0%, #38BDF8 100%);
  --gradient-radial: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.15), transparent 50%);
  --gradient-radial-2: radial-gradient(circle at 80% 80%, rgba(14, 165, 233, 0.1), transparent 50%);

  /* 语义化颜色 */
  --color-text-base: var(--content);
  --color-text-muted: var(--secondary);
  --color-text-emphasis: var(--primary);

  --color-bg-base: var(--theme);
  --color-bg-elevated: var(--entry);
  --color-bg-overlay: rgba(255, 255, 255, 0.9);
  --color-bg-muted: var(--code-bg);

  --color-border-base: var(--border);
  --color-border-emphasis: var(--accent);
  --color-border-muted: var(--tertiary);

  /* 尺寸变量 */
  --gap: 24px;
  --content-gap: 20px;
  --nav-width: 1280px;
  --main-width: 1000px;
  --header-height: 60px;
  --footer-height: auto;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

/* ==================== Dark Mode ==================== */
[data-theme="dark"] {
  /* 背景色 */
  --theme: #0F172A;              /* 深蓝黑背景 */
  --entry: #1E293B;              /* 深蓝卡片 */
  --code-bg: #334155;            /* 深蓝代码背景 */
  --code-block-bg: #1E293B;      /* 代码块背景 */

  /* 文本色 */
  --primary: #DBEAFE;            /* 亮蓝白主色 */
  --secondary: #94A3B8;          /* 石板灰副色 */
  --tertiary: #475569;           /* 深灰三级 */
  --content: #E2E8F0;            /* 浅灰内容 */

  /* 强调色 */
  --accent: #60A5FA;             /* 亮蓝（稍浅） */
  --accent-2: #38BDF8;           /* 天蓝（稍浅） */
  --success: #34D399;            /* 绿色（稍亮） */
  --warning: #FBBF24;            /* 橙色（稍亮） */
  --error: #F87171;              /* 红色（稍亮） */

  /* 边框和阴影 */
  --border: #334155;             /* 深蓝边框 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6);

  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, #60A5FA 0%, #38BDF8 100%);
  --gradient-secondary: linear-gradient(135deg, #93C5FD 0%, #7DD3FC 100%);
  --gradient-radial: radial-gradient(circle at 20% 20%, rgba(96, 165, 250, 0.12), transparent 50%);
  --gradient-radial-2: radial-gradient(circle at 80% 80%, rgba(56, 189, 248, 0.08), transparent 50%);

  /* 语义化颜色 */
  --color-bg-overlay: rgba(15, 23, 42, 0.9);
}

/* ==================== 背景装饰 ==================== */
body {
  background: var(--theme);
  background-image:
    var(--gradient-radial),
    var(--gradient-radial-2);
  background-attachment: fixed;
}

/* ==================== 平滑过渡 ==================== */
* {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

/* 禁用动画的元素 */
.no-transition,
.no-transition * {
  transition: none !important;
}

/* ==================== 主题切换动画 ==================== */
@media (prefers-reduced-motion: no-preference) {
  html {
    transition: background-color 0.3s ease;
  }
}