/* @theme minimal-dark */

/*
 * 极简深色主题 —— 适合技术演讲、夜间演示
 * 适用于：技术分享、代码演示、开发者大会
 * 灵感来源：Marp 内置主题、GitHub 社区主题
 *
 * 使用方法：
 *   1. 将此文件放入 Obsidian vault 的 MarpTheme/ 目录
 *   2. 重启 Obsidian
 *   3. 在幻灯片 front-matter 中写 theme: minimal-dark
 */

@import 'default';

/* ========== 颜色变量 ========== */
:root {
  --color-primary: #61dafb;       /* 主色：亮蓝 */
  --color-secondary: #00d9ff;     /* 辅助色：青色 */
  --color-accent: #ff4757;        /* 强调色：红 */
  --color-bg: #1e1e2e;            /* 背景色：深灰 */
  --color-text: #e4e4e7;          /* 正文色：浅灰 */
  --color-light: #2d3748;         /* 浅色背景 */
  --color-border: #4a5568;        /* 边框色 */
  --color-muted: #718096;         /* 次要文字 */
  --font-title: 'Inter', 'system-ui', sans-serif;
  --font-body: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

/* ========== 全局 ========== */
section {
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.7;
  padding: 50px 80px;
}

/* ========== 标题 ========== */
h1 {
  font-family: var(--font-title);
  font-size: 52px;
  color: var(--color-primary);
  margin-bottom: 35px;
  border: none;
  font-weight: 700;
}

h2 {
  font-family: var(--font-title);
  font-size: 38px;
  color: var(--color-secondary);
  margin-top: 25px;
  margin-bottom: 15px;
  font-weight: 600;
}

h3 {
  font-family: var(--font-title);
  font-size: 30px;
  color: var(--color-text);
  margin-top: 20px;
  font-weight: 500;
}

/* ========== 列表 ========== */
ul, ol {
  padding-left: 40px;
  line-height: 2;
  margin: 15px 0;
}

ul li::marker {
  color: var(--color-secondary);
}

ol li::marker {
  color: var(--color-primary);
  font-weight: bold;
}

/* ========== 引用 ========== */
blockquote {
  border-left: 4px solid var(--color-secondary);
  background-color: var(--color-light);
  padding: 20px 30px;
  margin: 25px 0;
  border-radius: 8px;
  font-size: 0.95em;
}

blockquote p {
  margin: 0;
}

/* ========== 代码 ========== */
code {
  font-family: var(--font-body);
  background-color: rgba(97, 218, 251, 0.15);
  color: var(--color-primary);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

pre {
  background-color: #171923;
  color: #e4e4e7;
  border-radius: 12px;
  padding: 30px;
  font-size: 0.82em;
  line-height: 1.6;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  margin: 20px 0;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: 1em;
}

/* ========== 表格 ========== */
table {
  border-collapse: collapse;
  margin: 25px auto;
  font-size: 0.9em;
  background: var(--color-light);
  border-radius: 8px;
  overflow: hidden;
}

th {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #1e1e2e;
  padding: 15px 25px;
  text-align: center;
  font-weight: bold;
}

td {
  padding: 12px 25px;
  border-bottom: 1px solid var(--color-border);
}

table tr:nth-child(even) {
  background-color: rgba(97, 218, 251, 0.05);
}

table tr:hover {
  background-color: rgba(97, 218, 251, 0.1);
}

/* ========== 图片 ========== */
img {
  max-width: 95%;
  border-radius: 10px;
  margin: 15px auto;
  display: block;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ========== 链接 ========== */
a {
  color: var(--color-secondary);
  text-decoration: none;
  border-bottom: 2px solid var(--color-secondary);
  transition: all 0.2s ease;
}

a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ========== 强调 ========== */
strong {
  color: var(--color-primary);
  font-weight: 700;
}

em {
  color: var(--color-secondary);
  font-style: italic;
}

/* ========== 页码 ========== */
section::after {
  font-size: 13px;
  color: var(--color-muted);
  content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
  opacity: 0.7;
}

/* ========================================
    特殊页面 class 指令
    ======================================== */

/* ---------- 封面页 ---------- */
section.cover {
  background: linear-gradient(135deg, #0d47a1 0%, #1e3a8a 50%, #0f172a 100%);
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section.cover h1 {
  color: var(--color-primary);
  text-shadow: 0 0 30px rgba(97, 218, 251, 0.3);
  font-size: 60px;
}

section.cover h2 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 30px;
  font-weight: normal;
}

section.cover::after {
  content: none;
}

/* ---------- 过渡页 ---------- */
section.trans {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px;
}

section.trans h2 {
  color: #1e1e2e;
  font-size: 48px;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* ---------- 深色页 ---------- */
section.dark {
  background-color: #0f172a;
  color: #f1f5f9;
  border-top: 3px solid var(--color-primary);
}

section.dark h1, section.dark h2, section.dark h3 {
  color: var(--color-primary);
  border-color: rgba(97, 218, 251, 0.3);
}

section.dark strong {
  color: var(--color-accent);
}

section.dark code {
  background-color: rgba(97, 218, 251, 0.2);
  color: var(--color-primary);
}

/* ---------- 两栏布局 ---------- */
section.cols-2 {
  overflow: visible;
  display: grid;
  gap: 2rem;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "heading heading"
    "left    right";
}

section.cols-2 > h2,
section.cols-2 > h3 {
  grid-area: heading;
}

section.cols-2 .ldiv { grid-area: left; }
section.cols-2 .rdiv { grid-area: right; }

/* ---------- 强调页（居中大标题） ---------- */
section.lead {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px;
}

section.lead h1 {
  font-size: 64px;
  color: var(--color-primary);
  text-shadow: 0 0 40px rgba(97, 218, 251, 0.4);
  margin: 0;
}

/* ---------- 结束页 ---------- */
section.ending {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px;
}

section.ending h1 {
  color: white;
  font-size: 72px;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  margin: 0;
}

section.ending h2 {
  color: rgba(255, 255, 255, 0.9);
  font-weight: normal;
  font-size: 28px;
  margin-top: 30px;
}

section.ending::after {
  content: none;
}