/*
 * March7th Design Tokens
 * Pure CSS variables for colors, spacing, radius, shadows, blur, breakpoints and responsive tokens.
 * Usage:
 *   <link rel="stylesheet" href="/theme/march7th-tokens.css">
 */

:root {
  color-scheme: light;

  --m7-hue: 215;                    /* 基础色调值(蓝色系)，用于动态计算其他颜色 */
  --m7-radius-large: 1rem;          /* 大圆角半径，用于卡片、按钮等大组件 */
  --m7-content-delay: 150ms;        /* 内容显示延迟，用于动画时序控制 */

  --m7-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --m7-ease-decelerate: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --m7-duration-fast: 150ms;
  --m7-duration-normal: 200ms;
  --m7-duration-medium: 300ms;
  --m7-duration-slow: 400ms;

  --m7-primary: #5b8def; /* 主品牌色/强调色，随 --m7-hue 动态变化 */
  --m7-primary: oklch(0.70 0.14 var(--m7-hue)); /* 主品牌色/强调色，随 --m7-hue 动态变化 */
  --m7-page-bg: #f1f4f8; /* 页面整体背景色 */
  --m7-page-bg: oklch(0.95 0.01 var(--m7-hue)); /* 页面整体背景色 */
  --m7-card-bg: #ffffff; /* 普通卡片背景色 */
  --m7-card-bg-transparent: rgba(255, 255, 255, 0.8); /* 半透明卡片背景色，用于毛玻璃/壁纸场景 */
  --m7-float-panel-bg: #ffffff; /* 浮动面板/弹出层背景色 */

  --m7-btn-content: #3671ba; /* 常规按钮文字/图标颜色 */
  --m7-btn-content: oklch(0.55 0.12 var(--m7-hue)); /* 常规按钮文字/图标颜色 */
  --m7-btn-regular-bg: #eef4fb; /* 常规按钮默认背景色 */
  --m7-btn-regular-bg: oklch(0.95 0.025 var(--m7-hue)); /* 常规按钮默认背景色 */
  --m7-btn-regular-bg-hover: #dcebf8; /* 常规按钮悬停背景色 */
  --m7-btn-regular-bg-hover: oklch(0.90 0.05 var(--m7-hue)); /* 常规按钮悬停背景色 */
  --m7-btn-regular-bg-active: #c9def2; /* 常规按钮按下背景色 */
  --m7-btn-regular-bg-active: oklch(0.85 0.08 var(--m7-hue)); /* 常规按钮按下背景色 */
  --m7-btn-plain-bg-hover: var(--m7-btn-regular-bg); /* 朴素按钮悬停背景色 */
  --m7-btn-plain-bg-active: oklch(0.98 0.01 var(--m7-hue)); /* 朴素按钮按下背景色 */
  --m7-btn-card-bg-hover: oklch(0.98 0.005 var(--m7-hue)); /* 卡片内按钮悬停背景色 */
  --m7-btn-card-bg-active: oklch(0.90 0.03 var(--m7-hue)); /* 卡片内按钮按下背景色 */

  --m7-text: #1f2937; /* 默认正文文字颜色 */
  --m7-text: oklch(0.25 0.02 var(--m7-hue)); /* 默认正文文字颜色 */
  --m7-text-strong: rgba(0, 0, 0, 0.9); /* 强文本颜色，用于标题/重要内容 */
  --m7-text-regular: rgba(0, 0, 0, 0.75); /* 常规文本颜色，用于正文 */
  --m7-text-muted: rgba(0, 0, 0, 0.5); /* 弱化文本颜色，用于摘要/说明 */
  --m7-text-subtle: rgba(0, 0, 0, 0.3); /* 极弱文本颜色，用于辅助提示 */
  --m7-title-active: oklch(0.60 0.10 var(--m7-hue)); /* 激活标题/当前项文字颜色 */
  --m7-content-meta: rgba(0, 0, 0, 0.7); /* 元信息文字颜色 */

  --m7-line-divider: rgba(0, 0, 0, 0.08); /* 轻量分割线颜色 */
  --m7-line-color: rgba(0, 0, 0, 0.1); /* 普通线条/边框颜色 */
  --m7-meta-divider: rgba(0, 0, 0, 0.2); /* 元信息分隔线颜色 */

  --m7-inline-code-bg: var(--m7-btn-regular-bg); /* 行内代码背景色 */
  --m7-inline-code-color: var(--m7-btn-content); /* 行内代码文字颜色 */
  --m7-selection-bg: oklch(0.90 0.05 var(--m7-hue)); /* 普通文本选中背景色 */
  --m7-codeblock-selection: oklch(0.40 0.08 var(--m7-hue)); /* 代码块内文本选中背景色 */
  --m7-codeblock-bg: #20242b; /* 代码块背景色 */
  --m7-codeblock-bg: oklch(0.17 0.015 var(--m7-hue)); /* 代码块背景色 */
  --m7-codeblock-topbar-bg: #3d4652; /* 代码块顶部栏背景色 */
  --m7-codeblock-topbar-bg: oklch(0.30 0.02 var(--m7-hue)); /* 代码块顶部栏背景色 */

  --m7-link-underline: oklch(0.93 0.04 var(--m7-hue)); /* 链接下划线颜色 */
  --m7-link-hover: oklch(0.95 0.025 var(--m7-hue)); /* 链接悬停背景/装饰色 */
  --m7-link-active: oklch(0.90 0.05 var(--m7-hue)); /* 链接按下背景/装饰色 */

  --m7-license-block-bg: rgba(0, 0, 0, 0.03); /* 许可证/说明区块背景色 */

  --m7-scrollbar-bg: rgba(0, 0, 0, 0.4); /* 滚动条默认颜色 */
  --m7-scrollbar-bg-hover: rgba(0, 0, 0, 0.5); /* 滚动条悬停颜色 */
  --m7-scrollbar-bg-active: rgba(0, 0, 0, 0.6); /* 滚动条按下颜色 */

  --m7-admonitions-color-tip: oklch(0.70 0.14 180); /* Tip 提示块语义色：青色 */
  --m7-admonitions-color-note: oklch(0.70 0.14 250); /* Note 备注块语义色：蓝色 */
  --m7-admonitions-color-important: oklch(0.70 0.14 310); /* Important 重要块语义色：紫色 */
  --m7-admonitions-color-warning: oklch(0.70 0.14 60); /* Warning 警告块语义色：黄色 */
  --m7-admonitions-color-caution: oklch(0.60 0.20 25); /* Caution 谨慎块语义色：橙红色 */

  --m7-accent-pink: oklch(0.78 0.13 345); /* 三月七辅助点缀色：粉色 */
  --m7-accent-purple: oklch(0.72 0.12 285); /* 三月七辅助点缀色：紫色 */
  --m7-accent-ice: oklch(0.86 0.08 205); /* 三月七辅助点缀色：冰蓝色 */

  --m7-toc-badge-bg: oklch(0.90 0.045 var(--m7-hue)); /* 目录徽章背景色 */
  --m7-toc-btn-hover: oklch(0.92 0.015 var(--m7-hue)); /* 目录按钮悬停背景色 */
  --m7-toc-btn-active: oklch(0.90 0.015 var(--m7-hue)); /* 目录按钮按下背景色 */
  --m7-toc-item-active: oklch(0.70 0.13 var(--m7-hue)); /* 目录当前项/激活项颜色 */

  --m7-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* 小阴影颜色 */
  --m7-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); /* 中等阴影颜色 */
  --m7-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* 大阴影颜色 */
  --m7-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); /* 超大阴影颜色 */

  --m7-color-selection-bar: linear-gradient( /* 主题色选择条渐变色带 */
    to right,
    oklch(0.80 0.10 0), /* 色相选择条：红色起点 */
    oklch(0.80 0.10 30), /* 色相选择条：橙色 */
    oklch(0.80 0.10 60), /* 色相选择条：黄色 */
    oklch(0.80 0.10 90), /* 色相选择条：黄绿色 */
    oklch(0.80 0.10 120), /* 色相选择条：绿色 */
    oklch(0.80 0.10 150), /* 色相选择条：青绿色 */
    oklch(0.80 0.10 180), /* 色相选择条：青色 */
    oklch(0.80 0.10 210), /* 色相选择条：蓝青色 */
    oklch(0.80 0.10 240), /* 色相选择条：蓝色 */
    oklch(0.80 0.10 270), /* 色相选择条：蓝紫色 */
    oklch(0.80 0.10 300), /* 色相选择条：紫色 */
    oklch(0.80 0.10 330), /* 色相选择条：紫红色 */
    oklch(0.80 0.10 360) /* 色相选择条：回到红色 */
  );
}

:root.m7-dark {
  color-scheme: dark;

  --m7-primary: #7aa7ff; /* 主品牌色/强调色，随 --m7-hue 动态变化 */
  --m7-primary: oklch(0.75 0.14 var(--m7-hue)); /* 主品牌色/强调色，随 --m7-hue 动态变化 */
  --m7-page-bg: #151922; /* 页面整体背景色 */
  --m7-page-bg: oklch(0.16 0.014 var(--m7-hue)); /* 页面整体背景色 */
  --m7-card-bg: #242a33; /* 普通卡片背景色 */
  --m7-card-bg: oklch(0.23 0.015 var(--m7-hue)); /* 普通卡片背景色 */
  --m7-card-bg-transparent: rgba(23, 23, 23, 0.8); /* 半透明卡片背景色，用于毛玻璃/壁纸场景 */
  --m7-float-panel-bg: oklch(0.19 0.015 var(--m7-hue)); /* 浮动面板/弹出层背景色 */

  --m7-btn-content: oklch(0.75 0.10 var(--m7-hue)); /* 常规按钮文字/图标颜色 */
  --m7-btn-regular-bg: oklch(0.33 0.035 var(--m7-hue)); /* 常规按钮默认背景色 */
  --m7-btn-regular-bg-hover: oklch(0.38 0.04 var(--m7-hue)); /* 常规按钮悬停背景色 */
  --m7-btn-regular-bg-active: oklch(0.43 0.045 var(--m7-hue)); /* 常规按钮按下背景色 */
  --m7-btn-plain-bg-hover: var(--m7-btn-regular-bg); /* 朴素按钮悬停背景色 */
  --m7-btn-plain-bg-active: oklch(0.28 0.025 var(--m7-hue)); /* 朴素按钮按下背景色 */
  --m7-btn-card-bg-hover: oklch(0.27 0.018 var(--m7-hue)); /* 卡片内按钮悬停背景色 */
  --m7-btn-card-bg-active: oklch(0.31 0.022 var(--m7-hue)); /* 卡片内按钮按下背景色 */

  --m7-text: #e5e7eb; /* 默认正文文字颜色 */
  --m7-text: oklch(0.92 0.01 var(--m7-hue)); /* 默认正文文字颜色 */
  --m7-text-strong: rgba(255, 255, 255, 0.9); /* 强文本颜色，用于标题/重要内容 */
  --m7-text-regular: rgba(255, 255, 255, 0.75); /* 常规文本颜色，用于正文 */
  --m7-text-muted: rgba(255, 255, 255, 0.5); /* 弱化文本颜色，用于摘要/说明 */
  --m7-text-subtle: rgba(255, 255, 255, 0.3); /* 极弱文本颜色，用于辅助提示 */
  --m7-title-active: oklch(0.75 0.10 var(--m7-hue)); /* 激活标题/当前项文字颜色 */
  --m7-content-meta: rgba(255, 255, 255, 0.6); /* 元信息文字颜色 */

  --m7-line-divider: rgba(255, 255, 255, 0.08); /* 轻量分割线颜色 */
  --m7-line-color: rgba(255, 255, 255, 0.1); /* 普通线条/边框颜色 */
  --m7-meta-divider: rgba(255, 255, 255, 0.2); /* 元信息分隔线颜色 */

  --m7-selection-bg: oklch(0.40 0.08 var(--m7-hue)); /* 普通文本选中背景色 */
  --m7-codeblock-bg: oklch(0.17 0.015 var(--m7-hue)); /* 代码块背景色 */
  --m7-codeblock-topbar-bg: oklch(0.12 0.015 var(--m7-hue)); /* 代码块顶部栏背景色 */

  --m7-link-underline: oklch(0.40 0.08 var(--m7-hue)); /* 链接下划线颜色 */
  --m7-link-hover: oklch(0.40 0.08 var(--m7-hue)); /* 链接悬停背景/装饰色 */
  --m7-link-active: oklch(0.35 0.07 var(--m7-hue)); /* 链接按下背景/装饰色 */

  --m7-license-block-bg: var(--m7-codeblock-bg); /* 许可证/说明区块背景色 */

  --m7-scrollbar-bg: rgba(255, 255, 255, 0.4); /* 滚动条默认颜色 */
  --m7-scrollbar-bg-hover: rgba(255, 255, 255, 0.5); /* 滚动条悬停颜色 */
  --m7-scrollbar-bg-active: rgba(255, 255, 255, 0.6); /* 滚动条按下颜色 */

  --m7-admonitions-color-tip: oklch(0.75 0.14 180); /* Tip 提示块语义色：青色 */
  --m7-admonitions-color-note: oklch(0.75 0.14 250); /* Note 备注块语义色：蓝色 */
  --m7-admonitions-color-important: oklch(0.75 0.14 310); /* Important 重要块语义色：紫色 */
  --m7-admonitions-color-warning: oklch(0.75 0.14 60); /* Warning 警告块语义色：黄色 */
  --m7-admonitions-color-caution: oklch(0.65 0.20 25); /* Caution 谨慎块语义色：橙红色 */

  --m7-toc-badge-bg: var(--m7-btn-regular-bg); /* 目录徽章背景色 */
  --m7-toc-btn-hover: oklch(0.22 0.02 var(--m7-hue)); /* 目录按钮悬停背景色 */
  --m7-toc-btn-active: oklch(0.25 0.02 var(--m7-hue)); /* 目录按钮按下背景色 */
  --m7-toc-item-active: oklch(0.70 0.12 var(--m7-hue)); /* 目录当前项/激活项颜色 */

  --m7-color-selection-bar: linear-gradient( /* 主题色选择条渐变色带 */
    to right,
    oklch(0.70 0.10 0), /* 暗色选择条：红色起点 */
    oklch(0.70 0.10 30), /* 暗色选择条：橙色 */
    oklch(0.70 0.10 60), /* 暗色选择条：黄色 */
    oklch(0.70 0.10 90), /* 暗色选择条：黄绿色 */
    oklch(0.70 0.10 120), /* 暗色选择条：绿色 */
    oklch(0.70 0.10 150), /* 暗色选择条：青绿色 */
    oklch(0.70 0.10 180), /* 暗色选择条：青色 */
    oklch(0.70 0.10 210), /* 暗色选择条：蓝青色 */
    oklch(0.70 0.10 240), /* 暗色选择条：蓝色 */
    oklch(0.70 0.10 270), /* 暗色选择条：蓝紫色 */
    oklch(0.70 0.10 300), /* 暗色选择条：紫色 */
    oklch(0.70 0.10 330), /* 暗色选择条：紫红色 */
    oklch(0.70 0.10 360) /* 暗色选择条：回到红色 */
  );
}

/* ===== March7th UI Design System Extension ===== */
:root {
  --m7-breakpoint-xs: 320px; /* 超小屏幕断点 */
  --m7-breakpoint-sm: 480px; /* 小屏幕断点 */
  --m7-breakpoint-md: 768px; /* 平板断点 */
  --m7-breakpoint-lg: 1024px; /* 桌面断点 */
  --m7-breakpoint-xl: 1280px; /* 大桌面断点 */
  --m7-breakpoint-2xl: 1536px; /* 超大桌面断点 */

  --m7-container-xs: 100%; /* 超小屏容器宽度 */
  --m7-container-sm: 100%; /* 小屏容器宽度 */
  --m7-container-md: 100%; /* 平板容器宽度 */
  --m7-container-lg: 1024px; /* 桌面容器最大宽度 */
  --m7-container-xl: 1280px; /* 大桌面容器最大宽度 */
  --m7-container-2xl: 1536px; /* 超大桌面容器最大宽度 */
  --m7-container-width: var(--m7-container-sm); /* 当前响应式容器宽度 */

  --m7-spacing-xs: 0.25rem; /* 4px 微小间距 */
  --m7-spacing-sm: 0.5rem; /* 8px 小间距 */
  --m7-spacing-md: 0.75rem; /* 12px 中等间距 */
  --m7-spacing-lg: 1rem; /* 16px 大间距 */
  --m7-spacing-xl: 1.25rem; /* 20px 超大间距 */
  --m7-spacing-2xl: 1.5rem; /* 24px 2倍间距 */
  --m7-spacing-3xl: 2rem; /* 32px 3倍间距 */
  --m7-spacing-4xl: 2.5rem; /* 40px 4倍间距 */
  --m7-spacing-5xl: 3rem; /* 48px 5倍间距 */

  --m7-widget-gap-mobile: var(--m7-spacing-md); /* 移动端组件间距 */
  --m7-widget-gap-tablet: var(--m7-spacing-lg); /* 平板端组件间距 */
  --m7-widget-gap-desktop: var(--m7-spacing-xl); /* 桌面端组件间距 */
  --m7-widget-gap: var(--m7-widget-gap-mobile); /* 当前响应式组件间距 */

  --m7-sidebar-width-mobile: 100%; /* 移动端侧栏宽度 */
  --m7-sidebar-width-tablet: 280px; /* 平板端侧栏宽度 */
  --m7-sidebar-width-desktop: 320px; /* 桌面端侧栏宽度 */
  --m7-sidebar-width: var(--m7-sidebar-width-mobile); /* 当前响应式侧栏宽度 */

  --m7-radius-sm: 0.25rem; /* 小圆角 */
  --m7-radius-md: 0.375rem; /* 中等圆角 */
  --m7-radius-lg: 0.5rem; /* 大圆角 */
  --m7-radius-xl: 0.75rem; /* 超大圆角 */
  --m7-radius-2xl: 1rem; /* 2倍圆角 */
  --m7-radius-3xl: 1.5rem; /* 3倍圆角 */
  --m7-radius-full: 9999px; /* 胶囊/圆形圆角 */

  --m7-ease-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 加速缓动 */
  --m7-ease-sharp: cubic-bezier(0.4, 0, 0.6, 1); /* 锐利缓动 */
  --m7-duration-slower: 500ms; /* 更慢动画 */
  --m7-delay-none: 0ms; /* 无延迟 */
  --m7-delay-short: 50ms; /* 短延迟 */
  --m7-delay-medium: 100ms; /* 中等延迟 */
  --m7-delay-long: 150ms; /* 长延迟 */
  --m7-delay-longer: 200ms; /* 更长延迟 */

  --m7-opacity-0: 0; /* 完全透明 */
  --m7-opacity-5: 0.05; /* 5% 透明度 */
  --m7-opacity-10: 0.1; /* 10% 透明度 */
  --m7-opacity-20: 0.2; /* 20% 透明度 */
  --m7-opacity-25: 0.25; /* 25% 透明度 */
  --m7-opacity-30: 0.3; /* 30% 透明度 */
  --m7-opacity-40: 0.4; /* 40% 透明度 */
  --m7-opacity-50: 0.5; /* 50% 透明度 */
  --m7-opacity-55: 0.55; /* 55% 透明度 */
  --m7-opacity-60: 0.6; /* 60% 透明度 */
  --m7-opacity-70: 0.7; /* 70% 透明度 */
  --m7-opacity-75: 0.75; /* 75% 透明度 */
  --m7-opacity-80: 0.8; /* 80% 透明度 */
  --m7-opacity-90: 0.9; /* 90% 透明度 */
  --m7-opacity-95: 0.95; /* 95% 透明度 */
  --m7-opacity-100: 1; /* 完全不透明 */

  --m7-blur-sm: 4px; /* 轻微毛玻璃 */
  --m7-blur-md: 8px; /* 中等毛玻璃 */
  --m7-blur-lg: 12px; /* 大模糊 */
  --m7-blur-xl: 16px; /* 超大模糊 */
  --m7-blur-2xl: 20px; /* 导航/浮层毛玻璃 */
  --m7-blur-3xl: 24px; /* 高强度模糊 */

  --m7-translate-xs: 0.125rem; /* 2px 微小移动 */
  --m7-translate-sm: 0.25rem; /* 4px 小移动 */
  --m7-translate-md: 0.5rem; /* 8px 中等移动 */
  --m7-translate-lg: 0.75rem; /* 12px 大移动 */
  --m7-translate-xl: 1rem; /* 16px 超大移动 */
  --m7-scale-95: 0.95; /* 点击缩小反馈 */
  --m7-scale-98: 0.98; /* 轻微缩小反馈 */
  --m7-scale-100: 1; /* 原始尺寸 */
  --m7-scale-105: 1.05; /* 悬停放大反馈 */
  --m7-scale-110: 1.1; /* 强调放大反馈 */

  --m7-z-dropdown: 1000; /* 下拉菜单层级 */
  --m7-z-sticky: 1020; /* 粘性元素层级 */
  --m7-z-fixed: 1030; /* 固定元素层级 */
  --m7-z-modal-backdrop: 1040; /* 模态遮罩层级 */
  --m7-z-modal: 1050; /* 模态内容层级 */
  --m7-z-popover: 1060; /* 弹出层层级 */
  --m7-z-tooltip: 1070; /* 提示层级 */
  --m7-z-toast: 1080; /* 消息提示层级 */
  --m7-gpu-transform: translateZ(0); /* GPU 加速变换 */
}

:root.m7-dark {
  --m7-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); /* 暗色小阴影 */
  --m7-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.24); /* 暗色中阴影 */
  --m7-shadow-lg: 0 12px 20px rgba(0, 0, 0, 0.28); /* 暗色大阴影 */
  --m7-shadow-xl: 0 24px 40px rgba(0, 0, 0, 0.34); /* 暗色超大阴影 */
}

@media (max-width: 767px) {
  :root {
    --m7-container-width: var(--m7-container-sm); /* 移动端容器宽度 */
    --m7-widget-gap: var(--m7-widget-gap-mobile); /* 移动端组件间距 */
    --m7-sidebar-width: var(--m7-sidebar-width-mobile); /* 移动端侧栏宽度 */
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --m7-container-width: var(--m7-container-md); /* 平板端容器宽度 */
    --m7-widget-gap: var(--m7-widget-gap-tablet); /* 平板端组件间距 */
    --m7-sidebar-width: var(--m7-sidebar-width-tablet); /* 平板端侧栏宽度 */
  }
}

@media (min-width: 1024px) {
  :root {
    --m7-container-width: var(--m7-container-lg); /* 桌面端容器宽度 */
    --m7-widget-gap: var(--m7-widget-gap-desktop); /* 桌面端组件间距 */
    --m7-sidebar-width: var(--m7-sidebar-width-desktop); /* 桌面端侧栏宽度 */
  }
}

@media (min-width: 1280px) {
  :root { --m7-container-width: var(--m7-container-xl); /* 大桌面容器宽度 */ }
}

@media (min-width: 1536px) {
  :root { --m7-container-width: var(--m7-container-2xl); /* 超大桌面容器宽度 */ }
}