/* === Gamut · 讀書筆記閱讀系統 · Design Tokens === */
/* 為中英夾雜長文閱讀優化，依據閱讀科學/認知負荷理論 */

:root {
  /* ── Typography stacks ──────────────────────────────────────────── */
  /* 中文襯線（內文）：閱讀科學上大字級襯線對 CJK 辨識度最高 */
  --font-serif-tc: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PingFang TC", "Microsoft JhengHei", serif;
  /* 中文無襯線（標題、UI） */
  --font-sans-tc: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  /* 拉丁字（術語錨點）：與中文襯線視覺分量平衡，提供"術語跳讀"效果 */
  --font-sans-latin: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  /* 拉丁襯線（內文英文） */
  --font-serif-latin: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  /* 等寬（代號、劑量、序列） */
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, monospace;

  /* ── Type scale (rem-based; user-controllable via :root font-size) */
  --fs-display: 2.25rem;   /* 36px H1 */
  --fs-h2: 1.625rem;       /* 26px section */
  --fs-h3: 1.25rem;        /* 20px subsection */
  --fs-h4: 1.0625rem;      /* 17px small heading */
  --fs-body: 1.0625rem;    /* 17px body — 適合長時間閱讀的最佳尺寸 */
  --fs-small: 0.9375rem;
  --fs-mono: 0.95em;
  --fs-kicker: 0.75rem;

  /* ── Rhythm ─────────────────────────────────────────────────────── */
  --lh-body: 1.85;         /* CJK 偏高行高，降低視線回掃疲勞 */
  --lh-tight: 1.45;
  --measure: 36em;         /* 約 38 中文字 / 70 拉丁字 — 最適讀寬 */
  --measure-wide: 44em;
  --tracking-kicker: 0.18em;

  /* ── Spacing scale ──────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
}

/* ── Theme: PAPER (default · 紙感日間) ───────────────────────────── */
/* 暖米黃紙感，避免純白眩光；經典書籍排版色調 */
:root, :root[data-theme="paper"] {
  --bg:           #F5F1E8;       /* 暖米紙 */
  --bg-sunken:   #ECE6D7;
  --bg-card:     #FBF8EF;
  --bg-elev:     #FFFCF4;
  --ink:         #2A2620;       /* 暖深灰 — 對比約 11:1，不刺眼 */
  --ink-2:       #524C42;
  --ink-3:       #807968;
  --ink-faint:   #B0A99A;
  --rule:        #DDD5C0;
  --rule-soft:   #E8E1CC;

  /* 語意色 — 與紙感調性協調的低彩度色系 */
  --accent:      #2E6F5E;       /* 森林綠 — primary */
  --accent-soft: #D3E4DA;
  --accent-deep: #1F4F43;

  --warn:        #B5511F;       /* 警示磚紅 */
  --warn-soft:   #F2D9C9;
  --warn-deep:   #8A3A14;

  --crit:        #963043;       /* cannot-miss 深酒紅 */
  --crit-soft:   #EFCFD3;
  --crit-deep:   #6F1F30;

  --info:        #3A6BA5;       /* 模式類藍 */
  --info-soft:   #D3DFEE;
  --info-deep:   #25497A;

  --highlight-bg: #FAE8A8;      /* ==螢光標記== */
  --highlight-ink: #4A3A0A;

  --term-bg: rgba(46, 111, 94, 0.07);
  --term-border: rgba(46, 111, 94, 0.18);

  --shadow-card: 0 1px 0 rgba(58,46,30,0.04), 0 8px 24px -16px rgba(58,46,30,0.18);
  --shadow-elev: 0 12px 40px -20px rgba(58,46,30,0.28);
}

/* ── Theme: SEPIA (warm dim 暖暈 · 黃昏閱讀) ────────────────────── */
:root[data-theme="sepia"] {
  --bg:           #E8DCC0;
  --bg-sunken:   #DCCFAE;
  --bg-card:     #F0E5C9;
  --bg-elev:     #F6ECD2;
  --ink:         #3A2D1A;
  --ink-2:       #604A30;
  --ink-3:       #8A734F;
  --ink-faint:   #B59E78;
  --rule:        #CCB888;
  --rule-soft:   #DAC79C;
  --accent:      #6B4520;
  --accent-soft: #DDC8A0;
  --accent-deep: #482D0E;
  --warn:        #A04420;
  --warn-soft:   #E6C39C;
  --warn-deep:   #6E2A0E;
  --crit:        #7C2A30;
  --crit-soft:   #DCB4A8;
  --crit-deep:   #51161B;
  --info:        #3F5A82;
  --info-soft:   #C9C9DD;
  --info-deep:   #213A5A;
  --highlight-bg: #EBC960;
  --highlight-ink: #3D2A00;
  --term-bg: rgba(107, 69, 32, 0.10);
  --term-border: rgba(107, 69, 32, 0.22);
  --shadow-card: 0 1px 0 rgba(58,46,30,0.04), 0 6px 22px -16px rgba(58,46,30,0.30);
  --shadow-elev: 0 12px 40px -20px rgba(58,46,30,0.40);
}

/* ── Theme: NIGHT (深夜閱讀 · 低對比暖黑) ───────────────────────── */
/* 不是純黑，是暖灰；保留 lumi 對比避免文字泡爛 */
:root[data-theme="night"] {
  --bg:           #161512;
  --bg-sunken:   #0F0E0C;
  --bg-card:     #1F1D1A;
  --bg-elev:     #28251F;
  --ink:         #E8E2D2;       /* 暖白，不刺眼 */
  --ink-2:       #B5AE9A;
  --ink-3:       #837C68;
  --ink-faint:   #5C5648;
  --rule:        #322E26;
  --rule-soft:   #25221C;
  --accent:      #6BB59C;       /* 茶綠 */
  --accent-soft: rgba(107, 181, 156, 0.14);
  --accent-deep: #9DD3BF;
  --warn:        #E4A268;
  --warn-soft:   rgba(228, 162, 104, 0.16);
  --warn-deep:   #F1BF8E;
  --crit:        #E18A8A;
  --crit-soft:   rgba(225, 138, 138, 0.16);
  --crit-deep:   #F2AFAF;
  --info:        #8AB5DC;
  --info-soft:   rgba(138, 181, 220, 0.14);
  --info-deep:   #B4CFEC;
  --highlight-bg: rgba(244, 200, 70, 0.20);
  --highlight-ink: #F4D87A;
  --term-bg: rgba(107, 181, 156, 0.10);
  --term-border: rgba(107, 181, 156, 0.28);
  --shadow-card: 0 1px 0 rgba(0,0,0,0.4), 0 12px 28px -18px rgba(0,0,0,0.65);
  --shadow-elev: 0 18px 48px -22px rgba(0,0,0,0.8);
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}