/* Colors, type stacks, radii and easing transcribed from the approved Argus UI.
   Map the prototype names onto the three existing saved preferences. */
:root{
  --ref-r-1:3px; --ref-r-2:6px; --ref-r-3:8px;
  --ref-f-ui:"Inter","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  --ref-f-serif:"Cormorant Garamond","Source Serif 4","Noto Serif SC","Songti SC","SimSun",Georgia,serif;
  --ref-f-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ref-f-hand:var(--ref-f-serif);
  --ref-r-lg:22px; --ref-r-md:14px; --ref-r-sm:10px;
  --ref-ease:cubic-bezier(.22,1,.36,1);
  --ref-spring:cubic-bezier(.2,.8,.2,1);
}

html[data-argus-theme="warm"]{
  --ref-bg:#d7d8d2; --ref-bg-dot:rgba(20,20,15,.16);
  --ref-surface:#ecece6; --ref-surface-2:#e2e3dd; --ref-raised:#f4f4ef;
  --ref-ed-bg:#c5c7c0; --ref-ed-surface:#d5d6d0; --ref-ed-stage:#b9bbb4;
  --ref-ink:#151511; --ref-ink-2:#55564d; --ref-ink-3:#8a8b82;
  --ref-line:rgba(21,21,17,.13); --ref-line-2:rgba(21,21,17,.24);
  --ref-accent:#151511; --ref-accent-ink:#f1f1ea; --ref-hi:#151511;
  --ref-glow:rgba(21,21,17,.34); --ref-edge:rgba(21,21,17,.34); --ref-edge-on:#151511;
  --ref-inv:#171715; --ref-inv-ink:#ecece5;
  --ref-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 30px -12px rgba(30,30,20,.25),0 2px 6px rgba(30,30,20,.06);
  --ref-glass:rgba(240,240,234,.72);
  --ref-display:var(--ref-f-serif); --ref-display-w:500; --ref-display-ls:-.01em;
}

html[data-argus-theme="charcoal"]{
  --ref-bg:#0b0d0c; --ref-bg-dot:rgba(255,255,255,.09);
  --ref-surface:#171a18; --ref-surface-2:#1e2220; --ref-raised:#232826;
  --ref-ed-bg:#171b19; --ref-ed-surface:#1f2321; --ref-ed-stage:#111412;
  --ref-ink:#eceee8; --ref-ink-2:#a3a89f; --ref-ink-3:#6c716a;
  --ref-line:rgba(255,255,255,.09); --ref-line-2:rgba(255,255,255,.18);
  --ref-accent:#d4f55b; --ref-accent-ink:#10140a; --ref-hi:#d4f55b;
  --ref-glow:rgba(212,245,91,.5); --ref-edge:rgba(255,255,255,.26); --ref-edge-on:#d4f55b;
  --ref-inv:#0b0d0c; --ref-inv-ink:#eceee8;
  --ref-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -16px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.4);
  --ref-glass:rgba(24,27,25,.72);
  --ref-display:var(--ref-f-ui); --ref-display-w:600; --ref-display-ls:-.02em;
}

html[data-argus-theme="paper"]{
  --ref-bg:#ebebea; --ref-bg-dot:rgba(0,0,0,.16);
  --ref-surface:#ffffff; --ref-surface-2:#f3f3f2; --ref-raised:#ffffff;
  --ref-ed-bg:#e2e2e1; --ref-ed-surface:#f4f4f3; --ref-ed-stage:#d4d4d3;
  --ref-ink:#111111; --ref-ink-2:#5b5b5b; --ref-ink-3:#9a9a9a;
  --ref-line:rgba(0,0,0,.08); --ref-line-2:rgba(0,0,0,.18);
  --ref-accent:#111111; --ref-accent-ink:#ffffff; --ref-hi:#6a5cf0;
  --ref-glow:rgba(106,92,240,.5); --ref-edge:rgba(0,0,0,.28); --ref-edge-on:#6a5cf0;
  --ref-inv:#111; --ref-inv-ink:#fff;
  --ref-shadow:0 12px 32px -14px rgba(60,50,120,.28),0 2px 6px rgba(0,0,0,.05);
  --ref-glass:rgba(255,255,255,.78);
  --ref-display:var(--ref-f-ui); --ref-display-w:600; --ref-display-ls:-.025em;
}
html[data-argus-font="virgil"]{--ref-f-hand:var(--ref-f-serif)}
html[data-argus-font="caveat"]{--ref-f-hand:var(--ref-f-serif)}

/* Existing controls and services retain their theme bindings. */
html[data-argus-theme] {
  --appearance-bg: var(--ref-bg);
  --appearance-surface: var(--ref-surface);
  --appearance-hover: var(--ref-surface-2);
  --appearance-ink: var(--ref-ink);
  --appearance-secondary: var(--ref-ink-2);
  --appearance-muted: var(--ref-ink-3);
  --appearance-line: var(--ref-line);
  --appearance-dot: var(--ref-bg-dot);
  --appearance-edge: var(--ref-edge);
  --appearance-accent: var(--ref-accent);
  --appearance-accent-ink: var(--ref-accent-ink);
  --appearance-accent-wash: color-mix(in srgb, var(--ref-hi) 12%, var(--ref-surface));
  --appearance-accent-deep: var(--ref-edge-on);
  --appearance-chip: var(--ref-surface-2);
  --nov05-font-cjk: var(--ref-f-serif);
  --nov05-font-latin: var(--ref-f-serif);
  --nov05-font-pen-cjk: var(--ref-f-serif);
  --nov05-font-hand: var(--ref-f-hand);
  --nov05-font-display: var(--ref-f-hand);
  --nov05-font-data: var(--ref-f-ui);
}
html[data-argus-theme] .app-frame {
  font-family: var(--ref-f-ui);
}
[data-appearance-swatch="warm"] { --swatch-base: #d7d8d2; --swatch-dot: #151511; }
[data-appearance-swatch="charcoal"] { --swatch-base: #0b0d0c; --swatch-dot: #d4f55b; }
[data-appearance-swatch="paper"] { --swatch-base: #ebebea; --swatch-dot: #6a5cf0; }

.sidebar.aux-card .appearance-panel {
  font: 14px/1.45 var(--ref-f-ui);
}
.appearance-panel fieldset { margin-bottom: 22px; }
.appearance-panel legend {
  font: 500 10.5px var(--ref-f-mono); letter-spacing: .1em;
  color: var(--ref-ink-3); margin: 2px 0 12px;
}
.appearance-panel .appearance-themes { gap: 8px; }
.appearance-panel .appearance-theme-option {
  border-radius: 4px; border: 1.5px solid var(--ref-line); padding: 5px;
  display: block; min-width: 0; text-align: center; font-size: 11.5px;
  color: var(--ref-ink-2); transition: transform .3s var(--ref-spring), border-color .3s, box-shadow .3s;
}
.appearance-panel .appearance-theme-option:hover { transform: translateY(-2px); background: transparent; }
.appearance-panel .appearance-theme-option:has(input:checked) {
  border-color: var(--ref-hi); color: var(--ref-ink);
  background: transparent; box-shadow: 0 0 18px -6px var(--ref-glow);
}
.appearance-panel .appearance-swatch {
  display: block; position: relative; height: 46px; width: 100%;
  border: 0; border-radius: 2px; margin-bottom: 6px; background: var(--swatch-base);
}
.appearance-panel .appearance-swatch::after {
  content: ""; position: absolute; left: 10px; bottom: 8px;
  width: 22px; height: 14px; border-radius: 2px; background: var(--swatch-dot);
}
.appearance-panel .appearance-fonts { gap: 4px; }
.appearance-panel .appearance-font-option {
  display: flex; justify-content: space-between; width: 100%; min-height: 44px;
  padding: 10px 12px; border: 1px solid transparent; border-radius: var(--ref-r-2);
  transition: background .25s, border-color .25s;
}
.appearance-panel .appearance-font-option > input {
  position: absolute; opacity: 0; pointer-events: none;
}
.appearance-panel .appearance-font-option:hover { background: var(--ref-surface-2); }
.appearance-panel .appearance-font-option:has(input:checked) {
  border-color: var(--ref-hi); background: var(--ref-surface-2);
}
.appearance-panel .appearance-font-preview { margin-left: 0; font-size: 20px; }
.appearance-panel [data-appearance-preview="caveat"] { font-family: var(--ref-f-serif); }
.appearance-panel .appearance-font-option > span:last-child { color: var(--ref-ink-3); font-size: 11px; }
@media (max-width: 560px) {
  .appearance-panel .appearance-themes { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .appearance-panel :is(.appearance-theme-option, .appearance-font-option) { transition: none; }
}