/* ==========================================================================
   故知 Guzhi — design tokens
   Single source of truth for color, type, and shape across every page.

   Usage
   -----
   In <head>, BEFORE the page's own <style> block:
       <link rel="stylesheet" href="/styles/tokens.css">

   Dark is the default. Light pages opt in on the root element:
       <html lang="zh" data-theme="light">

   Do not redeclare these in a page's <style>. If a page needs a value that
   isn't here, add it here instead — that's the whole point of this file.
   ========================================================================== */

:root {
  /* --- Surfaces ---------------------------------------------------------
     bg      page background
     bg-soft raised panel / section band
     card    elevated card sitting on bg-soft                            */
  --bg: #14110f;      /* also hard-coded in index.html's <meta name="theme-color">,
                         which can't take a var() — update both together. */
  --bg-soft: #1a1714;
  --card: #1c1815;

  /* --- Text -------------------------------------------------------------
     ink      primary body + headings
     ink-soft secondary copy, lede, labels
     muted    tertiary — captions, timestamps, disabled                  */
  --ink: #e8e2d8;
  --ink-soft: #b8b0a3;
  --muted: #6a6258;

  /* --- Structure ------------------------------------------------------ */
  --line: #2a241f;

  /* --- Brand ----------------------------------------------------------
     朱红 —— 故知的品牌色，深浅两个主题同一个值（2026-08-24 起，替换原来
     的金色 #e0a05a）。#ed5948 对深底 #14110f 的对比度约 5.5:1，对暖白底
     #faf7f0 约 3.6:1，两边都立得住，所以主色不分主题。
     只有 hover 方向按主题相反：深底上变亮，浅底上变暗。
     accent-dim 用于描边和任何全强度主色会太吵的地方。               */
  --accent: #ed5948;
  --accent-hover: #f26d5c;
  --accent-dim: #b03a2d;

  /* --- Status ---------------------------------------------------------- */
  --success: #7fae7a;
  --warn: #c9764f;
  --danger: #b4654a;
  --info: #6f9ccc;

  /* --- Match levels ------------------------------------------------------
     The three cluster depths from the matching engine (see poc/README.md).
     level-3 existential · level-2 values · level-1 taste
     Kept as tokens so the visualizations and the site agree on what a
     depth "looks like".                                                  */
  /* level-3 一直等于品牌主色（最深的共鸣＝最强的强调），跟着一起换。 */
  --level-3: #ed5948;
  --level-2: #8a9a6a;
  --level-1: #6a7a8a;

  /* --- Chat bubbles (train.html) ---------------------------------------- */
  --bubble-you: #2a241f;
  --bubble-them: #1c1815;

  /* --- Type -------------------------------------------------------------
     Serif is the editorial voice — letters, pull quotes, the essays.
     Sans is product UI. Mono is data.                                    */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
  --font-serif: "Songti SC", "Noto Serif SC", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale, grounded in what the pages actually use today. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 22px;

  /* --- Shape ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-pill: 999px;

  /* Lets native controls, scrollbars, and form widgets match the theme. */
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #faf7f0;
  --bg-soft: #f2ede2;
  --card: #ffffff;

  --ink: #1c1a17;
  --ink-soft: #4a463f;
  --muted: #8a8478;

  --line: #e6e0d1;

  /* 主色和深色主题同值，见上。浅底上 hover 往深里走。 */
  --accent: #ed5948;
  --accent-hover: #d64a3a;
  --accent-dim: #b03a2d;

  --success: #3f7a3f;
  --warn: #9a6432;
  --danger: #a33a3a;
  --info: #3a6ba3;

  --level-3: #ed5948;
  --level-2: #5f6f45;
  --level-1: #46586a;

  --bubble-you: #ede4d0;
  --bubble-them: #ffffff;

  color-scheme: light;
}

/* ==========================================================================
   Legacy aliases
   --------------------------------------------------------------------------
   Names that grew up in individual pages before this file existed. They're
   kept so existing markup keeps resolving. Prefer the canonical name above
   in new code; these can be retired once no page references them.
   ========================================================================== */
:root {
  --panel: var(--bg-soft);   /* walk, feedback, updates */
  --good: var(--success);    /* me, observe            */
  --green: var(--success);   /* admin                  */
  --err: var(--danger);      /* feedback               */
  --red: var(--danger);      /* admin, my-data, report */
  --blue: var(--info);       /* admin                  */
  --l3: var(--level-3);      /* walk                   */
  --l2: var(--level-2);      /* walk                   */
  --l1: var(--level-1);      /* walk                   */
}
