/* ==============================================
   基础变量（引入PHP主题色调：深紫/靛蓝）
   ============================================== */
:root {
  /* PHP主题核心色（深紫/靛蓝，贴近PHP官方标识） */
  --php-primary: #777bb4; /* PHP经典紫色 */
  --php-dark: #5c6bc0;   /* 稍深紫色（用于hover） */
  
  /* 亮色模式变量 */
  --light-bg: #eef2f7;
  --light-surface: #ffffff;
  --light-border: #cbd5e1;
  --light-border-strong: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --transition-speed: 0.4s;
}

html[data-bs-theme="dark"] {
  /* 暗黑模式下的PHP主题色（更亮的紫色，适应深色背景） */
  --php-primary: #9094d3; /* 稍亮紫色，在暗黑中更醒目 */
  --php-dark: #a3a6e6;    /* hover时更亮 */
  
  /* 暗黑模式基础变量 */
  --dark-bg: #212529;
  --dark-surface: #2d3748;
  --dark-border: #4a5568;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
}

/* ==============================================
   全局样式
   ============================================== */
body {
  margin: 0;
  background-color: var(--light-bg);
}

html[data-bs-theme="dark"] body {
  background-color: var(--dark-bg);
}

.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: inherit;
}

/* ==============================================
   核心优化：标题色贴近PHP主题
   ============================================== */
/* 亮色模式标题（Looking Glass） */
html[data-bs-theme="light"] #title {
  color: var(--php-primary); /* PHP经典紫色 */
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}
html[data-bs-theme="light"] #title:hover {
  color: var(--php-dark); /* 深一点的紫色（hover效果） */
}

/* 暗黑模式标题（Looking Glass） */
html[data-bs-theme="dark"] #title {
  color: var(--php-primary); /* 暗黑下的适配紫色 */
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}
html[data-bs-theme="dark"] #title:hover {
  color: var(--php-dark); /* 亮一点的紫色（hover效果） */
}

/* 标题区域强化（与PHP色调协调） */
html[data-bs-theme="light"] #header .page-header {
  border-bottom-color: var(--light-border-strong);
  padding: 1rem 0;
  margin-bottom: 1.5rem;
}
html[data-bs-theme="dark"] #header .page-header {
  border-bottom-color: var(--dark-border);
  padding: 1rem 0;
  margin-bottom: 1.5rem;
}

/* ==============================================
   亮色模式其他样式（保持清晰感）
   ============================================== */
html[data-bs-theme="light"] {
  color: var(--text-primary);
  line-height: 1.6;
}

html[data-bs-theme="light"] .card {
  background-color: var(--light-surface);
  border: 1px solid var(--light-border);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.2rem;
  overflow: hidden;
}

html[data-bs-theme="light"] .card-header {
  background-color: #f8fafc;
  border-bottom: 1px solid var(--light-border);
  padding: 0.9rem 1.2rem;
  font-weight: 600;
}

html[data-bs-theme="light"] .form-control:focus {
  border-color: var(--php-primary); /* 聚焦边框用PHP紫色，强化主题 */
  box-shadow: 0 0 0 2px rgba(119, 123, 180, 0.2); /* PHP色光晕 */
}

/* ==============================================
   暗黑模式其他样式（协调PHP色调）
   ============================================== */
html[data-bs-theme="dark"] {
  color: var(--text-primary);
  line-height: 1.6;
}

html[data-bs-theme="dark"] .card {
  background-color: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 1.2rem;
}

html[data-bs-theme="dark"] .form-control:focus {
  border-color: var(--php-primary); /* 暗黑模式聚焦边框也用PHP紫色 */
  box-shadow: 0 0 0 2px rgba(144, 148, 211, 0.2);
}

/* ==============================================
   全局过渡动画
   ============================================== */
#title, .form-control, .card, html, body {
  transition: all var(--transition-speed) ease-in-out;
}