/* Use the same foreground, fill and outline together, including in themed dialogs. */
header .brand .skater-logo { width: 48px; height: 48px; object-fit: contain; background: white; border-radius: 9px; flex: none; }
@media(max-width: 600px) { header .brand .skater-logo { width: 42px; height: 42px; } }
body[data-theme] {
  --button-edge: #836779;
  --button-fill: var(--secondary);
  --button-ink: var(--ink);
  --button-off-fill: var(--panel);
  --button-off-ink: var(--muted);
}
body[data-theme="2"] { --button-edge: #a8a0bf; }
body[data-theme="5"] { --button-edge: #a49d89; }
body[data-theme="7"] { --button-edge: #78795f; }

body[data-theme] :is(main.desk, #metrics) :is(button, select, .open),
body[data-theme] header .appearance-choice select,
body[data-theme] #saveBar #download {
  color: var(--action-ink, var(--button-ink));
  background-color: var(--action-fill, var(--button-fill));
  border: 1px solid var(--action-edge, var(--button-edge));
}
body[data-theme] :where(.open, .shoot, #play, #save, #download, .processing-reopen) {
  --action-fill: var(--key);
  --action-ink: var(--key-ink);
  --action-edge: var(--key);
}
body[data-theme] .video-choices .open-series { padding: .45rem .7rem; border-radius: .5rem; }
body[data-theme] .workspace.expanded .player,
body[data-theme] .workspace.expanded .replay-nav {
  color: var(--ink);
  background-color: var(--panel);
}
body[data-theme] .workspace.expanded .player :is(.rateholder, #stagecaption, #actionrow small),
body[data-theme] .source-panel .stature,
body[data-theme] #homeHelp { color: var(--ink); }
body[data-theme] #saveBar a:not(.savebtn) { color: var(--accent); }
body[data-theme] .workspace input[type="range"] { accent-color: var(--accent); }
body[data-theme] .desk :is(input[type="number"], input[type="text"]) { border-color: var(--button-edge); }

/* Processing and checkout have their own surfaces, including when opened over the player. */
body[data-theme] :is(.processing-dialog, .purchase) {
  color: var(--ink);
  background-color: var(--panel);
  border-color: var(--button-edge);
}
body[data-theme] .processing-offer { background-color: var(--secondary); }
body[data-theme] .processing-dialog :is(.processing-hint, .processing-offer p) { color: var(--muted); }
body[data-theme] .processing-dialog :is([data-percent], output) { color: var(--accent); }
body[data-theme] .purchase input { color: var(--ink); background-color: var(--panel); }
body[data-theme] :where(.processing-actions [data-ok], #stature-dialog [type="submit"], .purchase [data-buy], .purchase form button) {
  --action-fill: var(--key);
  --action-ink: var(--key-ink);
  --action-edge: var(--key);
}

/* These two viewers sit over footage, so they use a stable dark surround in all themes. */
body[data-theme] :is(.camera-dialog, .shot-gallery) {
  color: #f6fbff;
  --button-fill: #293943;
  --button-ink: #f6fbff;
  --button-edge: #9aaeb7;
  --button-off-fill: #263138;
  --button-off-ink: #b5c1c8;
}
body[data-theme] .shot-gallery header { background: transparent; color: inherit; }
body[data-theme] .shot-gallery nav button[aria-pressed="true"],
body[data-theme] .camera-dialog :where(#camOK, #camZoom [aria-pressed="true"]) {
  --action-ink: #112a25;
  --action-fill: #ccebc5;
  --action-edge: #ccebc5;
}
body[data-theme] .shot-gallery nav button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: .2em; }
body[data-theme] .camera-dialog #camStop { --action-ink: white; --action-fill: #903334; --action-edge: #e5a3a3; }
body[data-theme] .shot-gallery figure .shot-save {
  color: white;
  background-color: rgba(14, 24, 32, .73);
  border-color: #f5f9fc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}
body[data-theme] :is(main.desk, #metrics) :is(button, input, select):disabled,
body[data-theme] .source-panel:has(#file:disabled) .open {
  opacity: 1;
  color: var(--button-off-ink);
  -webkit-text-fill-color: var(--button-off-ink);
  background-color: var(--button-off-fill);
  border: 1px dashed var(--button-edge);
  cursor: default;
}
body[data-theme] :is(button, select, summary, a, input):focus-visible,
body[data-theme] .source-panel:has(#file:focus-visible) .open {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--panel);
}
body[data-theme] :is(.shot-gallery, .camera-dialog) :focus-visible { outline-color: white; box-shadow: 0 0 0 2px #15262b; }