/* 全局 CSS 变量定义 */
:root {
  color-scheme: light dark;
  /* 浅色模式颜色 - 橙粉胭脂混合色系 */
  --color-primary: #e8806b;
  --color-primary-hover: #d46850;
  --color-primary-light: rgba(232, 128, 107, 0.08);
  --color-primary-medium: rgba(232, 128, 107, 0.12);

  --color-text-primary: #2d1b17;
  --color-text-secondary: #4a2c23;
  --color-text-muted: #7c5a4f;
  --color-text-subtle: #a68a7f;

  --color-bg-primary: #ffffff;
  --color-bg-white: #fef4f1;
  --color-bg-environment: #fcebe6;

  --color-border-light: #f4d5cc;
  --color-border-medium: #e8b5a6;

  --color-nav-text: #7c5a4f;
  --color-nav-hover: rgba(230, 81, 0, 0.06);

  --color-hover-opacity: 0.85;
  --color-hover-border: var(--color-primary);

  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.1);

  /* 过渡动画 */
  --transition-fast: all 0.2s ease;
  --transition-medium: all 0.3s ease;

  /* 圆角 */
  --radius-small: 6px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-pill: 20px;

  /* 字体大小 */
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.85rem;
  --font-size-md: 0.9rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-title: 1.6rem;

  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans", "Droid Sans", "Microsoft YaHei", "SimHei", "SimSun", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-serif: "PT Serif", Georgia, ui-serif, Cambria, "Times New Roman", Times, "Liberation Serif", "DejaVu Serif", "Droid Serif", "Source Serif Pro", "Noto Serif CJK SC", "SimSun", serif;

  /* 间距 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* 响应式断点 */
  --breakpoint-md: 768px;
  --breakpoint-lg: 1200px;

  /* 内容宽度 */
  --body-max-width: 89rem;
  --sidebar-max-width: 23%;
  --toc-item-expanded-height: 50vh;
  /* 视窗高度的50% */

  /* 深色模式变量定义 */

  --dark-color-primary: #ff8a65;
  --dark-color-primary-hover: #ffab91;
  --dark-color-primary-light: rgba(255, 138, 101, 0.15);
  --dark-color-primary-medium: rgba(255, 138, 101, 0.22);

  --dark-color-text-primary: #ffffff;
  --dark-color-text-secondary: #e0e0e0;
  --dark-color-text-muted: #b0b0b0;
  --dark-color-text-subtle: #808080;

  --dark-color-bg-primary: #2e2e2e;
  --dark-color-bg-white: #383838;
  --dark-color-bg-environment: #424242;

  --dark-color-border-light: #424242;
  --dark-color-border-medium: #4c4c4c;

  /* 状态颜色 */
  --color-status-success: #10b981;
  --color-status-warning: #f59e0b;
  --color-status-error: #ef4444;
  --color-status-info: #3b82f6;

  --dark-color-nav-text: #b0b0b0;
  --dark-color-nav-hover: rgba(255, 138, 101, 0.12);

  --dark-color-hover-opacity: 0.75;
  --dark-shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.4);

  --present-on-light: revert;
  --present-on-dark: none;
}

/* 深色模式 - 系统偏好（用户未强制浅色） */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --color-primary: var(--dark-color-primary);
    --color-primary-hover: var(--dark-color-primary-hover);
    --color-primary-light: var(--dark-color-primary-light);
    --color-primary-medium: var(--dark-color-primary-medium);
    --color-text-primary: var(--dark-color-text-primary);
    --color-text-secondary: var(--dark-color-text-secondary);
    --color-text-muted: var(--dark-color-text-muted);
    --color-text-subtle: var(--dark-color-text-subtle);
    --color-bg-primary: var(--dark-color-bg-primary);
    --color-bg-white: var(--dark-color-bg-white);
    --color-bg-environment: var(--dark-color-bg-environment);
    --color-border-light: var(--dark-color-border-light);
    --color-border-medium: var(--dark-color-border-medium);
    --color-nav-text: var(--dark-color-nav-text);
    --color-nav-hover: var(--dark-color-nav-hover);
    --color-hover-opacity: var(--dark-color-hover-opacity);
    --color-hover-border: var(--color-primary);
    --shadow-heavy: var(--dark-shadow-heavy);
    --present-on-light: none;
    --present-on-dark: revert;
  }
}

/* 深色模式 - 用户手动选择 */
[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: var(--dark-color-primary);
  --color-primary-hover: var(--dark-color-primary-hover);
  --color-primary-light: var(--dark-color-primary-light);
  --color-primary-medium: var(--dark-color-primary-medium);
  --color-text-primary: var(--dark-color-text-primary);
  --color-text-secondary: var(--dark-color-text-secondary);
  --color-text-muted: var(--dark-color-text-muted);
  --color-text-subtle: var(--dark-color-text-subtle);
  --color-bg-primary: var(--dark-color-bg-primary);
  --color-bg-white: var(--dark-color-bg-white);
  --color-bg-environment: var(--dark-color-bg-environment);
  --color-border-light: var(--dark-color-border-light);
  --color-border-medium: var(--dark-color-border-medium);
  --color-nav-text: var(--dark-color-nav-text);
  --color-nav-hover: var(--dark-color-nav-hover);
  --color-hover-opacity: var(--dark-color-hover-opacity);
  --color-hover-border: var(--color-primary);
  --shadow-heavy: var(--dark-shadow-heavy);
  --present-on-light: none;
  --present-on-dark: revert;
}