/*
 * xPoster design tokens — the same design language as the 小小东提示词 member site
 * (vip.xiaoxiaodong.ai): black / white / grey, orderly, content first,
 * square corners by default, emphasis by ink rather than colour. Colour is reserved
 * for meaning (success, danger, warning) and for the optional 主色.
 *
 * Theme: <html data-theme="light|dark">, resolved by src/theme-boot.js and sidepanel.js
 * from the 「主题」 setting. Corners: <html data-corners="rounded"> (default square).
 * 主色: <html data-accent> plus --action-custom*, written by src/accent-color.js.
 * Loaded by every extension page before its own stylesheet.
 */
:root {
  color-scheme: light;
  --bg: #fcfcfc;
  --paper: #ffffff;
  --wash: #f4f4f5;
  --wash-strong: #ececee;
  --selected-bg: #ededed;
  --switch-on: #56565b;
  --ink: #111111;
  --ink-rgb: 17, 17, 17;
  --on-ink: #ffffff;
  --muted: #777777;
  --muted-2: #9a968d;
  --line: #e7e7ea;
  --line-strong: #c9c9ce;
  --paper-rgb: 255, 255, 255;
  --shadow-rgb: 17, 17, 17;
  --success: #15803d;
  --success-rgb: 21, 128, 61;
  --danger: #b42318;
  --danger-rgb: 180, 35, 24;
  --warning: #b45309;
  --warning-rgb: 180, 83, 9;
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--action) 24%, transparent);
  /* Emphasis colour. 墨色 (default) is ink; a 主色 replaces it (see below). Body text
     keeps --ink; only marks of emphasis use --action. */
  --action: var(--ink);
  --action-rgb: var(--ink-rgb);
  --on-action: var(--on-ink);
  --action-text: var(--ink);
  --shadow-popover: 0 18px 44px rgba(var(--shadow-rgb), 0.16);
  --shadow-dialog: 0 28px 76px rgba(var(--shadow-rgb), 0.24);
  --backdrop: rgba(5, 5, 5, 0.52);
  /* Corner scale. 「圆角」 setting: 直角 (default, like the member site) keeps
     everything square; 圆角 sets <html data-corners="rounded">. */
  --r-xs: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-pill: 0px;
  --font-body: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-title: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Interface icons: Lucide glyphs drawn like the member site (1.5 stroke, round caps,
     mitred joins). Brand marks own their strokes. */
  --ui-icon-stroke: 1.5;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171612;
  --paper: #201f1a;
  --wash: #2a2822;
  --wash-strong: #312f28;
  --selected-bg: #38362e;
  --switch-on: #cfc9bd;
  --ink: #f3f0ea;
  --ink-rgb: 243, 240, 234;
  --on-ink: #171612;
  --muted: #a7a194;
  --muted-2: #837d72;
  --line: #34322b;
  --line-strong: #4c483f;
  --paper-rgb: 32, 31, 26;
  --shadow-rgb: 0, 0, 0;
  --success: #4ade80;
  --success-rgb: 74, 222, 128;
  --danger: #f87171;
  --danger-rgb: 248, 113, 113;
  --warning: #f0b35a;
  --warning-rgb: 240, 179, 90;
  --shadow-popover: 0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-dialog: 0 28px 76px rgba(0, 0, 0, 0.5);
}

:root[data-corners="rounded"] {
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
}

/* 主色 (<html data-accent>): one colour sets the tone of the whole interface instead of
   being one coloured button on grey. accent-color.js supplies --action-custom* (the colour,
   its rgb, text on it, and a deeper text version; light and dark). From them:
   - emphasis (primary button, switch, tab underline, chosen option, focus) uses the colour;
   - selection and hover tints are faint layers of it rather than grey;
   - the neutral background, washes and lines take 3–12% of it, so the greys share its tone.
   Body text (--ink), paper, and success / danger / warning stay as they are. */
:root[data-accent] {
  --action: var(--action-custom);
  --action-rgb: var(--action-rgb-custom);
  --on-action: var(--on-action-custom);
  --action-text: var(--action-text-custom);
  --switch-on: var(--action);
  --selected-bg: color-mix(in srgb, var(--action) 13%, #ffffff);
  --bg: color-mix(in srgb, #fcfcfc 97%, var(--action));
  --wash: color-mix(in srgb, #f4f4f5 92%, var(--action));
  --wash-strong: color-mix(in srgb, #ececee 90%, var(--action));
  --line: color-mix(in srgb, #e7e7ea 90%, var(--action));
  --line-strong: color-mix(in srgb, #c9c9ce 88%, var(--action));
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--action) 45%, transparent);
}

:root[data-theme="dark"][data-accent] {
  --action: var(--action-custom-dark);
  --action-rgb: var(--action-rgb-custom-dark);
  --on-action: var(--on-action-custom-dark);
  --action-text: var(--action-text-custom-dark);
  --selected-bg: color-mix(in srgb, var(--action) 18%, #201f1a);
  --bg: color-mix(in srgb, #171612 97%, var(--action));
  --wash: color-mix(in srgb, #2a2822 94%, var(--action));
  --wash-strong: color-mix(in srgb, #312f28 92%, var(--action));
  --line: color-mix(in srgb, #34322b 90%, var(--action));
  --line-strong: color-mix(in srgb, #4c483f 88%, var(--action));
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--action) 55%, transparent);
}

/* Text selection and the typing caret follow the 主色 too. */
:root[data-accent] ::selection {
  background: color-mix(in srgb, var(--action) 24%, transparent);
}

:root[data-accent] :is(input, textarea) {
  caret-color: var(--action);
}