/* ReadMeow color editions.
   Presets change color only: Cift typography, spacing and geometry stay shared.
   Mist & Rose is the base palette in cift-theme.css / cift-dark.css. */
html.cift-ui[data-color-theme] {
  --cift-ink: var(--brand-ink);
  --cift-accent: var(--brand-blue);
  --cift-sage: var(--brand-blue-soft);
  --cift-sage-ink: var(--brand-blue-ink);
  --cift-lilac: var(--brand-rose-soft);
  --cift-lilac-ink: var(--brand-rose-ink);
  --ink: var(--cift-ink);
  --muted: var(--cift-muted);
  --line: var(--cift-line);
  --paper: var(--cift-bg);
  --surface: var(--cift-surface);
  --soft: var(--cift-surface-muted);
  --teal: var(--cift-accent);
  --teal-dark: var(--cift-accent);
  --mint: var(--cift-sage);
  --blue: var(--cift-sky-ink);
  --rain: var(--cift-muted);
  --moss: var(--cift-accent);
  --danger: var(--cift-danger);
  --shadow: var(--cift-shadow-soft);
  --theme-primary: var(--cift-accent);
  --theme-primary-deep: var(--cift-ink);
  --theme-primary-soft: var(--cift-control);
  --theme-primary-pale: var(--cift-surface-muted);
  --theme-primary-line: var(--cift-line);
  --theme-secondary: var(--cift-peach-ink);
  --theme-secondary-soft: var(--cift-peach);
  --theme-secondary-pale: var(--cift-surface-muted);
  --theme-field: var(--cift-surface);
}

/* Halo / 雾光 — pearl canvas, bright writing paper and a precise blue accent.
   The optional Halo tokens describe light only; component geometry remains
   separate so all editions keep their existing behavior. */
html.cift-ui[data-color-theme="halo"]:not(.is-dark) {
  --brand-mist: #d6e0f5;
  --brand-blue: #426bd8;
  --brand-rose: #c9d2e7;
  --brand-ink: #28364d;
  --brand-gray: #e1e7f0;
  --brand-blue-soft: #e6edfc;
  --brand-blue-ink: #2c51bb;
  --brand-rose-soft: #edf0f8;
  --brand-rose-ink: #58657f;
  --brand-focus: #426bd8;
  --brand-progress-start: #a7c1f3;
  --brand-progress-mid: #c2d5f6;
  --brand-progress-end: #e2ebfa;
  --brand-progress-glow: rgb(226 240 255 / .6);
  --cift-bg: #edf1f8;
  --cift-surface: #ffffff;
  --cift-surface-muted: #e7edf6;
  --cift-surface-soft: #f6f8fc;
  --cift-surface-overlay: rgb(255 255 255 / .64);
  --cift-muted: #5d6d84;
  --cift-line: #d9e1ee;
  --cift-control: #e9eff9;
  --cift-control-hover: #dce6f8;
  --cift-accent-hover: #2c51bb;
  --cift-on-accent: #ffffff;
  --cift-sky: #dfe9fb;
  --cift-sky-ink: #3157ad;
  --cift-peach: #edeef4;
  --cift-peach-ink: #626179;
  --cift-danger-bg: #f8e8ed;
  --cift-danger: #a03f5b;
  --cift-scrollbar: #b5c3d9;
  --cift-scrim: rgb(32 46 71 / .25);
  --cift-scrim-light: rgb(32 46 71 / .16);
  --cift-shadow-soft: 0 3px 16px rgb(54 76 117 / .045);
  --cift-shadow-float: 0 20px 56px rgb(54 76 117 / .13);
  --halo-canvas-glow: rgb(255 255 255 / .9);
  --halo-paper-glow: rgb(172 194 235 / .18);
  --halo-orbit-color: #a6bce6;
}
html.cift-ui.is-dark[data-color-theme="halo"] {
  --brand-mist: #b9cdef;
  --brand-blue: #aac3ff;
  --brand-rose: #bec9e5;
  --brand-ink: #e6edf9;
  --brand-gray: #36445a;
  --brand-blue-soft: #263754;
  --brand-blue-ink: #c3d5ff;
  --brand-rose-soft: #303b51;
  --brand-rose-ink: #cdd7ed;
  --brand-focus: #aac3ff;
  --brand-progress-start: #233957;
  --brand-progress-mid: #304b70;
  --brand-progress-end: #3e5f88;
  --brand-progress-glow: rgb(196 218 255 / .10);
  --cift-bg: #151c28;
  --cift-surface: #202a3a;
  --cift-surface-muted: #273348;
  --cift-surface-soft: #243045;
  --cift-surface-overlay: rgb(215 229 255 / .08);
  --cift-muted: #aebdd4;
  --cift-line: #3a4960;
  --cift-control: #2b3a54;
  --cift-control-hover: #384b6a;
  --cift-accent-hover: #c3d5ff;
  --cift-on-accent: #1b2d50;
  --cift-sky: #2d4263;
  --cift-sky-ink: #c1d7ff;
  --cift-peach: #343b50;
  --cift-peach-ink: #d0d4ea;
  --cift-danger-bg: #4b2d3d;
  --cift-danger: #f2b3c8;
  --cift-scrollbar: #5b7295;
  --cift-scrim: rgb(4 9 18 / .64);
  --cift-scrim-light: rgb(4 9 18 / .44);
  --cift-shadow-soft: 0 3px 16px rgb(0 0 0 / .14);
  --cift-shadow-float: 0 20px 56px rgb(0 0 0 / .32);
  --halo-canvas-glow: rgb(62 88 137 / .14);
  --halo-paper-glow: rgb(24 39 63 / .3);
  --halo-orbit-color: #6583b5;
}

/* Graphite / 黑白灰 — no chromatic brand or decorative tokens. */
html.cift-ui[data-color-theme="graphite"]:not(.is-dark) {
  --brand-mist: #cccccc;
  --brand-blue: #454545;
  --brand-rose: #b5b5b5;
  --brand-ink: #292929;
  --brand-gray: #e5e5e5;
  --brand-blue-soft: #e5e5e5;
  --brand-blue-ink: #434343;
  --brand-rose-soft: #eeeeee;
  --brand-rose-ink: #5b5b5b;
  --brand-focus: #707070;
  --brand-progress-start: #c5c5c5;
  --brand-progress-mid: #d5d5d5;
  --brand-progress-end: #e6e6e6;
  --brand-progress-glow: rgb(255 255 255 / .35);
  --cift-bg: #f4f4f4;
  --cift-surface: #ffffff;
  --cift-surface-muted: #ececec;
  --cift-surface-soft: #f8f8f8;
  --cift-surface-overlay: rgb(255 255 255 / .45);
  --cift-muted: #656565;
  --cift-line: #dedede;
  --cift-control: #e9e9e9;
  --cift-control-hover: #dddddd;
  --cift-accent-hover: #303030;
  --cift-on-accent: #ffffff;
  --cift-sky: #dadada;
  --cift-sky-ink: #3f3f3f;
  --cift-peach: #e9e9e9;
  --cift-peach-ink: #545454;
  --cift-danger-bg: #e8e8e8;
  --cift-danger: #353535;
  --cift-scrollbar: #bdbdbd;
  --cift-scrim: rgb(25 25 25 / .22);
  --cift-scrim-light: rgb(25 25 25 / .16);
  --cift-shadow-soft: 0 3px 14px rgb(25 25 25 / .045);
  --cift-shadow-float: 0 18px 48px rgb(25 25 25 / .12);
}
html.cift-ui.is-dark[data-color-theme="graphite"] {
  --brand-mist: #cccccc;
  --brand-blue: #d5d5d5;
  --brand-rose: #b5b5b5;
  --brand-ink: #eeeeee;
  --brand-gray: #393939;
  --brand-blue-soft: #343434;
  --brand-blue-ink: #dddddd;
  --brand-rose-soft: #393939;
  --brand-rose-ink: #d6d6d6;
  --brand-focus: #bdbdbd;
  --brand-progress-start: #292929;
  --brand-progress-mid: #363636;
  --brand-progress-end: #414141;
  --brand-progress-glow: rgb(255 255 255 / .07);
  --cift-bg: #191919;
  --cift-surface: #252525;
  --cift-surface-muted: #2d2d2d;
  --cift-surface-soft: #292929;
  --cift-surface-overlay: rgb(255 255 255 / .08);
  --cift-muted: #b4b4b4;
  --cift-line: #414141;
  --cift-control: #353535;
  --cift-control-hover: #444444;
  --cift-accent-hover: #e6e6e6;
  --cift-on-accent: #242424;
  --cift-sky: #3e3e3e;
  --cift-sky-ink: #e4e4e4;
  --cift-peach: #313131;
  --cift-peach-ink: #cccccc;
  --cift-danger-bg: #3c3c3c;
  --cift-danger: #eeeeee;
  --cift-scrollbar: #666666;
  --cift-scrim: rgb(0 0 0 / .6);
  --cift-scrim-light: rgb(0 0 0 / .4);
  --cift-shadow-soft: 0 3px 14px rgb(0 0 0 / .12);
  --cift-shadow-float: 0 18px 48px rgb(0 0 0 / .28);
}

/* Parchment / 纸墨燕麦 — warm paper, coffee ink and a little clay. */
html.cift-ui[data-color-theme="parchment"]:not(.is-dark) {
  --brand-mist: #d7caba;
  --brand-blue: #716153;
  --brand-rose: #c9aea0;
  --brand-ink: #312c28;
  --brand-gray: #e9e2d9;
  --brand-blue-soft: #ebe2d7;
  --brand-blue-ink: #655546;
  --brand-rose-soft: #f0e4dc;
  --brand-rose-ink: #795b4d;
  --brand-focus: #8e7966;
  --brand-progress-start: #d0bfac;
  --brand-progress-mid: #ddcfbe;
  --brand-progress-end: #ece3d8;
  --brand-progress-glow: rgb(255 250 241 / .4);
  --cift-bg: #f5f2ed;
  --cift-surface: #fffdfa;
  --cift-surface-muted: #eee8e0;
  --cift-surface-soft: #f8f5f0;
  --cift-surface-overlay: rgb(255 253 250 / .45);
  --cift-muted: #6d635b;
  --cift-line: #e1d9cf;
  --cift-control: #ebe4db;
  --cift-control-hover: #ded3c7;
  --cift-accent-hover: #5e4f43;
  --cift-on-accent: #ffffff;
  --cift-sky: #e2d6c8;
  --cift-sky-ink: #604f40;
  --cift-peach: #ede0d5;
  --cift-peach-ink: #725545;
  --cift-danger-bg: #f3e3de;
  --cift-danger: #934d42;
  --cift-scrollbar: #c2b4a5;
  --cift-scrim: rgb(47 38 30 / .22);
  --cift-scrim-light: rgb(47 38 30 / .16);
  --cift-shadow-soft: 0 3px 14px rgb(60 46 32 / .045);
  --cift-shadow-float: 0 18px 48px rgb(60 46 32 / .12);
}
html.cift-ui.is-dark[data-color-theme="parchment"] {
  --brand-mist: #d7caba;
  --brand-blue: #d4c2ac;
  --brand-rose: #c9aea0;
  --brand-ink: #eee8df;
  --brand-gray: #443d36;
  --brand-blue-soft: #42382f;
  --brand-blue-ink: #e2d0ba;
  --brand-rose-soft: #493a33;
  --brand-rose-ink: #e5c7b5;
  --brand-focus: #cfbda7;
  --brand-progress-start: #372e26;
  --brand-progress-mid: #463a2e;
  --brand-progress-end: #524537;
  --brand-progress-glow: rgb(255 238 210 / .07);
  --cift-bg: #201d1a;
  --cift-surface: #2b2622;
  --cift-surface-muted: #342e28;
  --cift-surface-soft: #302a25;
  --cift-surface-overlay: rgb(255 245 231 / .08);
  --cift-muted: #beb1a3;
  --cift-line: #494037;
  --cift-control: #3d342b;
  --cift-control-hover: #4b4035;
  --cift-accent-hover: #e4d3be;
  --cift-on-accent: #33291f;
  --cift-sky: #473b2f;
  --cift-sky-ink: #e7d2b9;
  --cift-peach: #44362d;
  --cift-peach-ink: #e4c8b1;
  --cift-danger-bg: #4a302b;
  --cift-danger: #efb8ac;
  --cift-scrollbar: #746252;
  --cift-scrim: rgb(0 0 0 / .6);
  --cift-scrim-light: rgb(0 0 0 / .4);
  --cift-shadow-soft: 0 3px 14px rgb(0 0 0 / .12);
  --cift-shadow-float: 0 18px 48px rgb(0 0 0 / .28);
}

/* Dusk / 暮紫烟粉 — mineral violet, softened by dusty rose. */
html.cift-ui[data-color-theme="dusk"]:not(.is-dark) {
  --brand-mist: #c8bfd8;
  --brand-blue: #6e5f80;
  --brand-rose: #d3b9c3;
  --brand-ink: #302b36;
  --brand-gray: #e8e4ed;
  --brand-blue-soft: #e9e2f0;
  --brand-blue-ink: #665473;
  --brand-rose-soft: #f1e4ea;
  --brand-rose-ink: #7c5969;
  --brand-focus: #8b789f;
  --brand-progress-start: #c5b6d4;
  --brand-progress-mid: #d3c7df;
  --brand-progress-end: #e5ddec;
  --brand-progress-glow: rgb(255 246 255 / .4);
  --cift-bg: #f5f3f7;
  --cift-surface: #fefcff;
  --cift-surface-muted: #eee9f2;
  --cift-surface-soft: #f8f6fa;
  --cift-surface-overlay: rgb(254 252 255 / .45);
  --cift-muted: #6b6273;
  --cift-line: #e2dce8;
  --cift-control: #eae4ef;
  --cift-control-hover: #ded4e7;
  --cift-accent-hover: #5c4e6e;
  --cift-on-accent: #ffffff;
  --cift-sky: #dfd6e9;
  --cift-sky-ink: #5d4c6e;
  --cift-peach: #ece0e4;
  --cift-peach-ink: #735760;
  --cift-danger-bg: #f4e1e6;
  --cift-danger: #994657;
  --cift-scrollbar: #bfb1cb;
  --cift-scrim: rgb(40 31 50 / .22);
  --cift-scrim-light: rgb(40 31 50 / .16);
  --cift-shadow-soft: 0 3px 14px rgb(47 33 61 / .045);
  --cift-shadow-float: 0 18px 48px rgb(47 33 61 / .12);
}
html.cift-ui.is-dark[data-color-theme="dusk"] {
  --brand-mist: #c8bfd8;
  --brand-blue: #cdbddd;
  --brand-rose: #d3b9c3;
  --brand-ink: #eee8f3;
  --brand-gray: #413849;
  --brand-blue-soft: #3d324a;
  --brand-blue-ink: #dfcdee;
  --brand-rose-soft: #48323e;
  --brand-rose-ink: #ebcad8;
  --brand-focus: #c5afd9;
  --brand-progress-start: #312739;
  --brand-progress-mid: #40314d;
  --brand-progress-end: #4c3b5a;
  --brand-progress-glow: rgb(239 213 255 / .07);
  --cift-bg: #211c26;
  --cift-surface: #2b2532;
  --cift-surface-muted: #342c3c;
  --cift-surface-soft: #302937;
  --cift-surface-overlay: rgb(247 235 255 / .08);
  --cift-muted: #bcb0c7;
  --cift-line: #473c52;
  --cift-control: #3b3045;
  --cift-control-hover: #4a3b57;
  --cift-accent-hover: #decee9;
  --cift-on-accent: #302139;
  --cift-sky: #42324e;
  --cift-sky-ink: #e1ccef;
  --cift-peach: #44333f;
  --cift-peach-ink: #e5c4d3;
  --cift-danger-bg: #4e303d;
  --cift-danger: #f0b4c6;
  --cift-scrollbar: #71617f;
  --cift-scrim: rgb(0 0 0 / .6);
  --cift-scrim-light: rgb(0 0 0 / .4);
  --cift-shadow-soft: 0 3px 14px rgb(0 0 0 / .12);
  --cift-shadow-float: 0 18px 48px rgb(0 0 0 / .28);
}

/* Ocean / 雾海蓝 — tonal blue-gray; deliberately no green cast. */
html.cift-ui[data-color-theme="ocean"]:not(.is-dark) {
  --brand-mist: #b6cadc;
  --brand-blue: #476480;
  --brand-rose: #c2cadb;
  --brand-ink: #27313d;
  --brand-gray: #e0e8ef;
  --brand-blue-soft: #e0eaf3;
  --brand-blue-ink: #3c5772;
  --brand-rose-soft: #e8ebf3;
  --brand-rose-ink: #596781;
  --brand-focus: #6281a0;
  --brand-progress-start: #acc4da;
  --brand-progress-mid: #c0d4e5;
  --brand-progress-end: #dce7f0;
  --brand-progress-glow: rgb(237 247 255 / .4);
  --cift-bg: #f1f5f8;
  --cift-surface: #fcfdff;
  --cift-surface-muted: #e9eff5;
  --cift-surface-soft: #f5f8fb;
  --cift-surface-overlay: rgb(252 253 255 / .45);
  --cift-muted: #5c6a7a;
  --cift-line: #dae3ec;
  --cift-control: #e3ebf2;
  --cift-control-hover: #d4e0eb;
  --cift-accent-hover: #36516d;
  --cift-on-accent: #ffffff;
  --cift-sky: #d4e3ef;
  --cift-sky-ink: #365570;
  --cift-peach: #e7e9ef;
  --cift-peach-ink: #5c6577;
  --cift-danger-bg: #f1e2e8;
  --cift-danger: #924d63;
  --cift-scrollbar: #afc2d4;
  --cift-scrim: rgb(26 41 57 / .22);
  --cift-scrim-light: rgb(26 41 57 / .16);
  --cift-shadow-soft: 0 3px 14px rgb(30 51 74 / .045);
  --cift-shadow-float: 0 18px 48px rgb(30 51 74 / .12);
}
html.cift-ui.is-dark[data-color-theme="ocean"] {
  --brand-mist: #b6cadc;
  --brand-blue: #afcbe4;
  --brand-rose: #c2cadb;
  --brand-ink: #e6edf5;
  --brand-gray: #334458;
  --brand-blue-soft: #2c3f55;
  --brand-blue-ink: #c2daf0;
  --brand-rose-soft: #333b4d;
  --brand-rose-ink: #cdd8ee;
  --brand-focus: #9ebfdd;
  --brand-progress-start: #233449;
  --brand-progress-mid: #2d435c;
  --brand-progress-end: #36506c;
  --brand-progress-glow: rgb(203 230 255 / .07);
  --cift-bg: #181f29;
  --cift-surface: #212c3a;
  --cift-surface-muted: #283547;
  --cift-surface-soft: #253140;
  --cift-surface-overlay: rgb(232 244 255 / .08);
  --cift-muted: #acbacb;
  --cift-line: #384a60;
  --cift-control: #2e4055;
  --cift-control-hover: #3a4e67;
  --cift-accent-hover: #c7ddef;
  --cift-on-accent: #1c3045;
  --cift-sky: #2e455e;
  --cift-sky-ink: #c6dff4;
  --cift-peach: #333c4e;
  --cift-peach-ink: #cbd5e8;
  --cift-danger-bg: #492e3c;
  --cift-danger: #efb6ca;
  --cift-scrollbar: #56708c;
  --cift-scrim: rgb(0 0 0 / .6);
  --cift-scrim-light: rgb(0 0 0 / .4);
  --cift-shadow-soft: 0 3px 14px rgb(0 0 0 / .12);
  --cift-shadow-float: 0 18px 48px rgb(0 0 0 / .28);
}

/* The navigation lives outside main-area, so it needs its own token bridge.
   These rules intentionally leave its layout, indicator motion and icons alone. */
html.cift-ui[data-color-theme] .workbench-bottom-nav {
  color: var(--cift-ink);
  border-color: var(--cift-line);
  background: color-mix(in srgb, var(--cift-surface-muted) 92%, transparent);
  box-shadow: var(--cift-shadow-float);
}
html.cift-ui[data-color-theme] .workbench-bottom-nav::before {
  background: var(--cift-surface);
  box-shadow: var(--cift-shadow-soft);
}
html.cift-ui[data-color-theme] .workbench-bottom-nav button { color: var(--cift-muted); }
html.cift-ui[data-color-theme] .workbench-bottom-nav button:hover {
  color: var(--cift-ink);
  background: color-mix(in srgb, var(--cift-control-hover) 65%, transparent);
}
html.cift-ui[data-color-theme] .workbench-bottom-nav button.is-active { color: var(--cift-accent); }
html.cift-ui.is-dark[data-color-theme] .workbench-bottom-nav::before { background: var(--cift-control-hover); }

/* Theme palettes provide the color; the component owns its visible liquid motion.
   Dark highlights are contrast-bounded in writing-workbench.css. */
html.cift-ui.is-dark[data-color-theme] .ww-progress-pill {
  --ww-progress-bg: var(--cift-bg);
  --ww-progress-ink: var(--cift-ink);
}
html.cift-ui[data-color-theme] .home-page .home-pet-button {
  --pet-glow-soft: color-mix(in srgb, var(--brand-mist) 25%, transparent);
  --pet-glow-wide: color-mix(in srgb, var(--brand-mist) 22%, transparent);
}
html.cift-ui.is-dark[data-color-theme] .home-page .home-pet-button {
  filter: drop-shadow(0 0 5px var(--pet-glow-soft)) drop-shadow(0 0 18px var(--pet-glow-wide));
}
html.cift-ui.is-dark[data-color-theme] .home-page .home-pet-button:is(:hover, :focus-visible) {
  filter: drop-shadow(0 0 6px var(--pet-glow-soft)) drop-shadow(0 0 22px var(--pet-glow-wide));
}