/* 东来知识库的视觉取值：色系、字体、字号、圆角、阴影、动效、主要尺寸。
   想换风格，先改这一个文件。每个颜色写成 light-dark(浅色, 深色)，界面的其他文件只引用这些变量。 */
:root {
  color-scheme: light dark;

  /* ---- surfaces and text ---- */
  --bg: light-dark(#f7f6f3, #131312);
  --surface: light-dark(#ffffff, #1c1b1a);
  --surface-2: light-dark(#f0eee9, #252422);
  --text: light-dark(#1d1c1a, #ecebe8);
  --muted: light-dark(#6f6b64, #a5a199);
  --faint: light-dark(#757068, #8f8a82);
  --border: light-dark(#e7e4de, #2e2d2a);
  --hover-tint: rgba(0, 0, 0, .06);

  /* ---- accent ---- */
  --accent: light-dark(#c8553d, #e07a5f);
  --accent-soft: light-dark(#f6e4de, #3a2621);
  --accent-text: light-dark(#a8432e, #f0a089);
  --favorite: #ffd36b;
  --highlight: light-dark(#ffe9a8, #6b5a1e);

  /* ---- placeholder card (no cover image) ---- */
  --placeholder-from: light-dark(#efe7dc, #3a3129);
  --placeholder-to: light-dark(#e3d6c6, #2a241f);
  --placeholder-text: light-dark(#3d3328, #efe7dc);

  /* ---- on top of pictures, video and the dark scrim ---- */
  --badge-bg: light-dark(rgba(16, 15, 14, .78), rgba(0, 0, 0, .78));
  --media-bg: #000;
  --stage-bg: #0f0f0f;
  --on-media: #fff;
  --on-media-soft: #ddd;
  --on-media-faint: #aaa;
  --media-control: rgba(0, 0, 0, .5);
  --media-control-hover: rgba(0, 0, 0, .68);
  --media-control-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  --scrim: rgba(8, 8, 8, .92);
  --scrim-control: rgba(255, 255, 255, .12);
  --scrim-control-hover: rgba(255, 255, 255, .16);

  /* ---- typography ---- */
  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-size-2xs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-base: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 19px;
  --font-size-2xl: 22px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 650;
  --reading-leading: 1.9;

  /* ---- shape, depth, motion ---- */
  --radius-2xs: 3px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px light-dark(rgba(30, 25, 20, .06), rgba(0, 0, 0, .3)), 0 4px 16px light-dark(rgba(30, 25, 20, .06), rgba(0, 0, 0, .25));
  --motion-fast: .15s;
  --motion-base: .2s;
  --motion-slow: .35s;

  /* ---- main proportions ---- */
  --top-h: 52px;
  --sidebar-w: 248px;
  --window-controls-inset: 92px;         /* room for the window's traffic lights */
  --rail-w: 380px;
  --card-min: 268px;
  --content-max: 1720px;
  --content-no-rail-max: 1100px;
  --reader-max: 780px;

  /* ---- phones and tablets ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --top-with-inset: calc(var(--top-h) + var(--safe-top));
  --tabbar-h: 50px;
  --touch-target: 44px;
  --gutter-compact: 16px;
  --font-size-input: 16px;               /* below this, iOS zooms the page when a field gets focus */
  --drawer-scrim: rgba(8, 8, 8, .45);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }