/* GROK HTML 美感策略 — 共用 tokens（App shell／輕量頁可直接 @import 或貼上）
   完整手帳報告請用 learning-manual/kit/base.css，唔好喺呢度重造膠紙／紙紋。 */

:root{
  /* surfaces */
  --bg:#f4efe6;
  --paper:#fffdf8;
  --paper2:#f7f1e4;
  --side:#efe6d6;
  --line:#e2d6c1;
  --line2:#d6c6aa;
  --sand:#e9dcc3;

  /* four text tiers */
  --title:#3d2416;   /* 標題／重點 */
  --body:#5a5148;    /* 內文 */
  --muted:#8a7f72;   /* 次要／括號 */
  --faint:#b0a492;   /* 更淡 */
  --brick:#a8452c;   /* 關鍵字／數字／連結 */
  --brick-soft:#f3dccf;

  /* accents */
  --hl:#f7e3a1;      /* 螢光（預設／term-a）*/
  /* 螢光係一套調色盤，唔係單一隻色：新詞輪流 a/b/c/d，重覆詞用 soft */
  --hl-a:#f7e3a1; --hl-b:#f3dccf; --hl-c:#e7ecd8; --hl-d:#dfe9f2; --hl-soft:#e4f0ee;
  --olive:#6f7a4a;
  --teal:#2f7f7a;
  --mustard:#e0a73a;

  --radius:16px;
  --radius-sm:12px;
  --shadow:0 8px 18px rgba(74,48,22,.10), 0 2px 4px rgba(0,0,0,.04);
  --cjk:"PingFang HK","Noto Sans CJK HK","Noto Sans HK","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--body);
  font:16.5px/1.75 var(--cjk);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brick);text-underline-offset:2px}
code{font-family:var(--mono);font-size:.88em;background:var(--paper2);padding:.08em .4em;border-radius:6px;color:var(--title)}

/* type helpers */
.t-title{color:var(--title);font-weight:800}
.t-body{color:var(--body)}
.t-muted{color:var(--muted)}
.t-faint{color:var(--faint)}
.kw,.k-num{color:var(--brick);font-weight:700}
.hl{background:linear-gradient(transparent 62%,var(--hl) 62%,var(--hl) 92%,transparent 92%)}

/* reading card */
.card-read{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 28px 32px;
  max-width:820px;
  margin:0 auto;
}

/* section heading band */
.h-band{
  margin:1.4em 0 .7em;
  padding:.45em .8em;
  border-radius:0 10px 10px 0;
  border-left:4px solid var(--brick);
  background:linear-gradient(90deg,#f8e9d6,transparent);
  color:var(--title);
  font-weight:800;
}
.h-band.h3{border-left-color:var(--olive);background:linear-gradient(90deg,#eef0e2,transparent);font-size:1.05em}

/* callouts */
.callout{
  background:#fbf0dc;
  border-left:4px solid var(--brick);
  border-radius:0 12px 12px 0;
  padding:12px 16px;
  margin:0 0 16px;
}
.callout .lbl{display:block;font-size:11px;font-weight:750;color:var(--brick);letter-spacing:.1em;margin-bottom:4px}
.callout.tip{border-left-color:var(--teal);background:#eef6f4}
.callout.tip .lbl{color:var(--teal)}
.callout.warn{border-left-color:var(--mustard);background:#fff8e8}
.callout.warn .lbl{color:#9a6b10}

.shell-max{max-width:1440px;margin:0 auto}

/* highlighter palette helpers */
.hl-a{background:linear-gradient(transparent 42%,var(--hl-a) 42%)}
.hl-b{background:linear-gradient(transparent 42%,var(--hl-b) 42%)}
.hl-c{background:linear-gradient(transparent 42%,var(--hl-c) 42%)}
.hl-d{background:linear-gradient(transparent 42%,var(--hl-d) 42%)}
.hl-soft{background:linear-gradient(transparent 72%,var(--hl-soft) 72%)}