/**
 * 算优台 · 全站统一 UI 设计规范（正式版）— CSS 变量层
 * 文档：字号 12/14/16/20/28/36；间距 8/12/16/24/32/48；圆角 8/12/16；主色 #4f46e5；克制阴影；深浅色板。
 */

:root {
  --dt-color-brand: #4f46e5;
  --dt-color-brand-soft: #ede9fe;

  --dt-font-xs: 12px;
  --dt-font-sm: 14px;
  --dt-font-base: 16px;
  --dt-font-md: 20px;
  --dt-font-lg: 28px;
  --dt-font-xl: 36px;

  --dt-space-1: 8px;
  --dt-space-2: 12px;
  --dt-space-3: 16px;
  --dt-space-4: 24px;
  --dt-space-5: 32px;
  --dt-space-6: 48px;

  --dt-radius-sm: 8px;
  --dt-radius-md: 12px;
  --dt-radius-lg: 16px;

  --dt-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --dt-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

  --dt-duration: 0.25s;
  --dt-transition: var(--dt-duration) linear;
}

html[data-theme="light"] {
  --dt-page-bg: #f9fafb;
  --dt-card-bg: #ffffff;
  --dt-text: #111827;
  --dt-text-muted: #4b5563;
  --dt-border: #e5e7eb;
  --dt-muted-bg: #f3f4f6;
}

html[data-theme="dark"] {
  --dt-page-bg: #202123;
  --dt-card-bg: #343541;
  --dt-text: #ffffff;
  --dt-text-muted: #d1d5db;
  --dt-border: #3f3f46;
  --dt-muted-bg: #2b2d36;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --dt-page-bg: #f9fafb;
    --dt-card-bg: #ffffff;
    --dt-text: #111827;
    --dt-text-muted: #4b5563;
    --dt-border: #e5e7eb;
    --dt-muted-bg: #f3f4f6;
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --dt-page-bg: #202123;
    --dt-card-bg: #343541;
    --dt-text: #ffffff;
    --dt-text-muted: #d1d5db;
    --dt-border: #3f3f46;
    --dt-muted-bg: #2b2d36;
  }
}

/* —— 全站 bridge（兼容现有 --primary / --dark-bg / --font-* / --space-*）—— */
html[data-theme="light"],
html[data-theme="dark"] {
  /* 官网 index 历史变量名 → 文档间距 */
  --space-12: var(--dt-space-2);
  --space-16: var(--dt-space-3);
  --space-20: var(--dt-space-4);
  --space-24: var(--dt-space-4);
  --space-32: var(--dt-space-5);
  --space-48: var(--dt-space-6);
  --space-64: var(--dt-space-6);

  --primary: var(--dt-color-brand);
  --primary-2: #6366f1;
  /* SEO 落地页 */
  --bg: var(--dt-page-bg);
  --bg-soft: var(--dt-card-bg);
  --card: var(--dt-card-bg);
  --text: var(--dt-text);
  --muted: var(--dt-text-muted);
  --brand: var(--dt-color-brand);
  --brand-2: #6366f1;
  --dark-bg: var(--dt-page-bg);
  --card-bg: var(--dt-card-bg);
  --text-main: var(--dt-text);
  --text-sub: var(--dt-text-muted);
  --line: var(--dt-border);
  --line-soft: rgba(126, 140, 160, 0.22);

  --font-xs: var(--dt-font-xs);
  --font-sm: var(--dt-font-sm);
  --font-base: var(--dt-font-base);
  --font-lg: var(--dt-font-lg);
  --font-xl: var(--dt-font-md);
  --font-2xl: var(--dt-font-xl);

  --space-xs: var(--dt-space-1);
  --space-sm: var(--dt-space-1);
  --space-md: var(--dt-space-2);
  --space-lg: var(--dt-space-3);
  --space-xl: var(--dt-space-4);
  --space-2xl: var(--dt-space-6);

  --radius-sm: var(--dt-radius-sm);
  --radius-base: var(--dt-radius-md);
  --radius-lg: var(--dt-radius-lg);
  --radius-card: var(--dt-radius-lg);
  --radius-input: var(--dt-radius-md);

  --shadow-card: var(--dt-shadow-1);
  --shadow-card-hover: var(--dt-shadow-hover);
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.28);
}

html[data-theme="light"] {
  --line-soft: rgba(20, 28, 58, 0.1);
  --table-head-bg: #f3f4f6;
  --table-zebra: #f9fafb;
  --accent-pill-bg: rgba(79, 70, 229, 0.1);
  --accent-pill-border: rgba(79, 70, 229, 0.22);
  --accent-pill-bg-hover: rgba(79, 70, 229, 0.16);
  --accent-pill-border-hover: rgba(79, 70, 229, 0.32);
  --accent-tag-bg: var(--dt-color-brand-soft);
  --accent-tag-border: rgba(79, 70, 229, 0.22);
  --accent-tag-text: #3730a3;
}

html[data-theme="dark"] {
  --line-soft: rgba(255, 255, 255, 0.08);
  --table-head-bg: rgba(255, 255, 255, 0.06);
  --table-zebra: rgba(255, 255, 255, 0.04);
  --accent-pill-bg: rgba(79, 70, 229, 0.18);
  --accent-pill-border: rgba(165, 180, 252, 0.28);
  --accent-pill-bg-hover: rgba(79, 70, 229, 0.26);
  --accent-pill-border-hover: rgba(199, 210, 254, 0.38);
  --accent-tag-bg: rgba(79, 70, 229, 0.22);
  --accent-tag-border: rgba(165, 180, 252, 0.32);
  --accent-tag-text: #e0e7ff;
  --focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.35);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --space-12: var(--dt-space-2);
    --space-16: var(--dt-space-3);
    --space-20: var(--dt-space-4);
    --space-24: var(--dt-space-4);
    --space-32: var(--dt-space-5);
    --space-48: var(--dt-space-6);
    --space-64: var(--dt-space-6);
    --primary: var(--dt-color-brand);
    --primary-2: #6366f1;
    --bg: var(--dt-page-bg);
    --bg-soft: var(--dt-card-bg);
    --card: var(--dt-card-bg);
    --text: var(--dt-text);
    --muted: var(--dt-text-muted);
    --brand: var(--dt-color-brand);
    --brand-2: #6366f1;
    --dark-bg: var(--dt-page-bg);
    --card-bg: var(--dt-card-bg);
    --text-main: var(--dt-text);
    --text-sub: var(--dt-text-muted);
    --line: var(--dt-border);
    --line-soft: rgba(20, 28, 58, 0.1);
    --font-xs: var(--dt-font-xs);
    --font-sm: var(--dt-font-sm);
    --font-base: var(--dt-font-base);
    --font-lg: var(--dt-font-lg);
    --font-xl: var(--dt-font-md);
    --font-2xl: var(--dt-font-xl);
    --space-xs: var(--dt-space-1);
    --space-sm: var(--dt-space-1);
    --space-md: var(--dt-space-2);
    --space-lg: var(--dt-space-3);
    --space-xl: var(--dt-space-4);
    --space-2xl: var(--dt-space-6);
    --radius-sm: var(--dt-radius-sm);
    --radius-base: var(--dt-radius-md);
    --radius-lg: var(--dt-radius-lg);
    --radius-card: var(--dt-radius-lg);
    --radius-input: var(--dt-radius-md);
    --shadow-card: var(--dt-shadow-1);
    --shadow-card-hover: var(--dt-shadow-hover);
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.28);
    --table-head-bg: #f3f4f6;
    --table-zebra: #f9fafb;
    --accent-pill-bg: rgba(79, 70, 229, 0.1);
    --accent-pill-border: rgba(79, 70, 229, 0.22);
    --accent-pill-bg-hover: rgba(79, 70, 229, 0.16);
    --accent-pill-border-hover: rgba(79, 70, 229, 0.32);
    --accent-tag-bg: var(--dt-color-brand-soft);
    --accent-tag-border: rgba(79, 70, 229, 0.22);
    --accent-tag-text: #3730a3;
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --space-12: var(--dt-space-2);
    --space-16: var(--dt-space-3);
    --space-20: var(--dt-space-4);
    --space-24: var(--dt-space-4);
    --space-32: var(--dt-space-5);
    --space-48: var(--dt-space-6);
    --space-64: var(--dt-space-6);
    --primary: var(--dt-color-brand);
    --primary-2: #6366f1;
    --bg: var(--dt-page-bg);
    --bg-soft: var(--dt-card-bg);
    --card: var(--dt-card-bg);
    --text: var(--dt-text);
    --muted: var(--dt-text-muted);
    --brand: var(--dt-color-brand);
    --brand-2: #6366f1;
    --dark-bg: var(--dt-page-bg);
    --card-bg: var(--dt-card-bg);
    --text-main: var(--dt-text);
    --text-sub: var(--dt-text-muted);
    --line: var(--dt-border);
    --line-soft: rgba(255, 255, 255, 0.08);
    --font-xs: var(--dt-font-xs);
    --font-sm: var(--dt-font-sm);
    --font-base: var(--dt-font-base);
    --font-lg: var(--dt-font-lg);
    --font-xl: var(--dt-font-md);
    --font-2xl: var(--dt-font-xl);
    --space-xs: var(--dt-space-1);
    --space-sm: var(--dt-space-1);
    --space-md: var(--dt-space-2);
    --space-lg: var(--dt-space-3);
    --space-xl: var(--dt-space-4);
    --space-2xl: var(--dt-space-6);
    --radius-sm: var(--dt-radius-sm);
    --radius-base: var(--dt-radius-md);
    --radius-lg: var(--dt-radius-lg);
    --radius-card: var(--dt-radius-lg);
    --radius-input: var(--dt-radius-md);
    --shadow-card: var(--dt-shadow-1);
    --shadow-card-hover: var(--dt-shadow-hover);
    --focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.35);
    --table-head-bg: rgba(255, 255, 255, 0.06);
    --table-zebra: rgba(255, 255, 255, 0.04);
    --accent-pill-bg: rgba(79, 70, 229, 0.18);
    --accent-pill-border: rgba(165, 180, 252, 0.28);
    --accent-pill-bg-hover: rgba(79, 70, 229, 0.26);
    --accent-pill-border-hover: rgba(199, 210, 254, 0.38);
    --accent-tag-bg: rgba(79, 70, 229, 0.22);
    --accent-tag-border: rgba(165, 180, 252, 0.32);
    --accent-tag-text: #e0e7ff;
  }
}