/*
 * 术语地图 — Design Tokens
 * ============================================================================
 * 视觉基准: D:\Yuan\theme\brand-research-theme.css
 *
 * BR-Theme 原始变量 → 术语地图 映射:
 *   --br-bg-page      #F5F0E8  → --color-bg
 *   --br-bg-card      #FFFFFF  → --color-surface
 *   --br-bg-lessons   #FAFAF7  → --color-surface-soft
 *   --br-ink          #1C1C1C  → --color-text
 *   --br-ink-light    #555555  → --color-text-secondary
 *   --br-ink-muted    #8B8B8B  → --color-muted
 *   --br-accent       #C2513B  → --color-accent
 *   --br-accent-light #E07A5F  → --color-accent-soft
 *   --br-neutral      #4A6FA5  → --color-primary
 *   --br-callout-bg   #FDF6F2  → --color-accent-bg
 *   --br-tag-bg       #FDF2EC  → tag background
 *   --br-border       #E8E4DA  → --color-border
 *   --br-border-light #F0EDE5  → --color-border-light
 *   --br-shadow       0 1px 4px rgba(0,0,0,.05) → --shadow-sm
 *   --br-shadow-hover 0 4px 16px rgba(0,0,0,.1) → --shadow-md
 *   --br-radius       12px → --radius-lg
 *   --br-radius-sm    8px  → --radius-md
 *   --br-font-serif   Playfair Display ... → --font-serif
 *   --br-font-sans    DM Sans ...          → --font-sans
 * ============================================================================
 */

/* ==========================================================================
 * Light Theme
 * ========================================================================== */
:root,
[data-theme="light"] {
  /* ── Background ── */
  --color-bg: #FFF8F0;
  --color-surface: #FFFFFF;
  --color-surface-soft: #FAFAF7;
  --color-surface-hover: #FDF6F2;

  /* ── Text ── */
  --color-text: #1C1C1C;
  --color-text-secondary: #555555;
  --color-muted: #8B8B8B;

  /* ── Primary (steel blue, BR-Theme --br-neutral) ── */
  --color-primary: #3D5A80;
  --color-primary-soft: #5F7FA6;
  --color-primary-bg: #EEF3F7;

  /* ── Accent (brick red, BR-Theme --br-accent) ── */
  --color-accent: #E07A5F;
  --color-accent-soft: #E07A5F;
  --color-accent-bg: #FDF6F2;
  --color-sage: #81B29A;
  --color-sage-bg: #F1F8F4;
  --color-blush: #F4ACB7;
  --color-blush-bg: #FFF1F4;
  --color-charcoal: #2B2D42;

  /* ── Links ── */
  --color-link: #B85F4C;
  --color-link-hover: #8F3F32;

  /* ── Code ── */
  --color-code-bg: #F7EFE8;
  --color-code-text: #B85F4C;

  /* ── Semantic ── */
  --color-positive: #5B8C6F;
  --color-positive-bg: #F1F8F4;
  --color-warning: #B8860B;
  --color-warning-bg: #FDF8EE;

  /* ── Border ── */
  --color-border: #E8E4DA;
  --color-border-light: #F0EDE5;

  /* ── Scrollbar ── */
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: rgba(28, 28, 28, 0.08);
  --color-scrollbar-thumb-hover: rgba(28, 28, 28, 0.28);

  /* ── Header ── */
  --color-header-bg: rgba(255, 248, 240, 0.92);
  --color-header-border: rgba(224, 122, 95, 0.18);
  --color-header-shadow: 0 10px 30px rgba(43, 45, 66, 0.06);
  --color-input-bg: #FFFFFF;
  --color-input-border: #E8D9CC;
  --color-input-focus: #E07A5F;

  /* ── Dividers ── */
  --color-toc-border: rgba(232, 228, 218, 0.90);
  --color-divider-subtle: rgba(232, 228, 218, 0.85);

  /* ── Shadow ── */
  --shadow-sm: 0 1px 5px rgba(43, 45, 66, 0.06);
  --shadow-md: 0 8px 24px rgba(43, 45, 66, 0.10);
  --shadow-lg: 0 18px 45px rgba(43, 45, 66, 0.14);

  /* ── Radius ── */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;

  /* ── Typography ── */
  --font-sans: "DM Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Playfair Display", "Noto Serif SC", Georgia, "STSong", "SimSun", serif;
  --font-accent: "Crimson Pro", "Noto Serif SC", Georgia, "STSong", "SimSun", serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono",
    "Noto Sans Mono", "Consolas", monospace;

  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  --line-height: 1.7;
  --line-height-heading: 1.3;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* ── Layout ── */
  --sidebar-width: 260px;
  --toc-width: 200px;
  --header-height: 56px;
  --content-max-width: 860px;
}

/* ==========================================================================
 * Dark Theme
 * ========================================================================== */
[data-theme="dark"] {
  /* ── Background (deep warm gray, not pure black) ── */
  --color-bg: #1E1C1A;
  --color-surface: #2A2724;
  --color-surface-soft: #252320;
  --color-surface-hover: #33302C;

  /* ── Text (warm white) ── */
  --color-text: #E8E4DC;
  --color-text-secondary: #B0A89C;
  --color-muted: #787068;

  /* ── Primary (lighter steel blue for dark) ── */
  --color-primary: #7BA5CC;
  --color-primary-soft: #5B85B0;
  --color-primary-bg: #1E2832;

  /* ── Accent (lifted brick red, not blinding) ── */
  --color-accent: #E07A5F;
  --color-accent-soft: #F0A090;
  --color-accent-bg: #2E221E;

  /* ── Links ── */
  --color-link: #E07A5F;
  --color-link-hover: #F0A090;

  /* ── Code ── */
  --color-code-bg: #2E2A26;
  --color-code-text: #E07A5F;

  /* ── Semantic ── */
  --color-positive: #7BA889;
  --color-positive-bg: #1E2E24;
  --color-warning: #C9A030;
  --color-warning-bg: #2E2818;

  /* ── Border ── */
  --color-border: #3A3630;
  --color-border-light: #302C28;

  /* ── Scrollbar ── */
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: rgba(232, 228, 220, 0.10);
  --color-scrollbar-thumb-hover: rgba(232, 228, 220, 0.32);

  /* ── Header ── */
  --color-header-bg: #25211D;
  --color-header-border: rgba(70, 64, 56, 0.95);
  --color-header-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  --color-input-bg: #28241F;
  --color-input-border: #3A3630;
  --color-input-focus: #E07A5F;

  /* ── Dividers ── */
  --color-toc-border: rgba(58, 54, 48, 0.90);
  --color-divider-subtle: rgba(58, 54, 48, 0.85);

  /* ── Shadow ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6);
}