/* Palette shared by the MiraX workspace, Unigma and AlexSVD. */
:root {
  --suite-canvas: light-dark(#f2f2f2, #141414);
  --suite-surface: light-dark(#fff, #1d1d1d);
  --suite-raised: light-dark(#f3f3f3, #252525);
  --suite-hover: light-dark(#ededed, #303030);
  --suite-selected: light-dark(#e7e7e7, #383838);
  --suite-ink: light-dark(#161616, #f2f2f2);
  --suite-muted: light-dark(#575757, #b8b8b8);
  --suite-inverse: light-dark(#fff, #141414);
  --suite-border: light-dark(#dadada, #414141);
  --suite-border-strong: light-dark(#bdbdbd, #606060);
  --suite-focus: light-dark(#555, #b8b8b8);
  --suite-header: #101010;
  --suite-header-text: #f2f2f2;
  --suite-header-muted: #b8b8b8;
  --suite-header-control: #252525;
  --suite-header-border: #414141;
  --suite-radius: 8px;
  --suite-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root, :root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="keitaro"] {
  color-scheme: dark;
}
:root, :root[data-theme] {
  --ui-bg: var(--suite-canvas);
  --ui-surface: var(--suite-surface);
  --ui-surface-2: var(--suite-raised);
  --ui-text: var(--suite-ink);
  --ui-muted: var(--suite-muted);
  --ui-blue: var(--suite-ink);
  --ui-blue-hover: var(--suite-muted);
  --ui-blue-soft: var(--suite-hover);
  --ui-button-bg: var(--suite-ink);
  --ui-button-hover: var(--suite-muted);
  --ui-border: var(--suite-border);
  --ui-border-strong: var(--suite-border-strong);
  --ui-font: var(--suite-font);
  --ui-radius: var(--suite-radius);
  --ui-shadow: none;
  --theme-canvas: var(--suite-canvas);
  --theme-surface: var(--suite-surface);
  --theme-raised: var(--suite-raised);
  --theme-ink: var(--suite-ink);
  --theme-muted: var(--suite-muted);
  --theme-border: var(--suite-border);
  --theme-border-soft: var(--suite-border);
  --theme-link: var(--suite-ink);
  --theme-on-color: var(--suite-inverse);
  --theme-accent-fill: var(--suite-ink);
  --theme-accent-line: var(--suite-border-strong);
}

html[data-theme] .shell .sidebar {
  background: var(--suite-raised);
}
html[data-theme] .shell .sidebar nav button.selected {
  background: var(--suite-selected);
  color: var(--suite-ink);
}
html[data-theme] .shell .sidebar nav button.selected > .ui-icon {
  color: var(--suite-ink);
}
html[data-theme] .shell .sidebar nav button.selected i {
  background: var(--suite-ink);
}

html[data-theme] .shell .topbar,
html[data-theme] .reader-header {
  color-scheme: dark;
  background: var(--suite-header);
  color: var(--suite-header-muted);
  border-color: var(--suite-header-border);
}
html[data-theme] :is(.shell .topbar, .reader-header) :is(b, .wordmark, a) {
  color: var(--suite-header-text);
}
html[data-theme] :is(.shell .topbar, .reader-header) :is(.theme-switch, .theme-switch .ui-icon, .reader-header > span) {
  color: var(--suite-header-muted);
  border-color: var(--suite-header-border);
}
html[data-theme] :is(.shell .topbar, .reader-header) :is(select, select:hover, button.quiet, button.secondary) {
  color: var(--suite-header-text);
  background: var(--suite-header-control);
  border-color: var(--suite-header-border);
}
html[data-theme] .shell :is(.material-card, .buyer-row, .modal, .enigma-card),
html[data-theme] .reader-material {
  border-radius: var(--suite-radius);
  box-shadow: none;
}
html[data-theme] .shell .buyer-row-main .buyer-row-open {
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-theme] .shell :is(.buyer-row-meta, .card-meta, .tag, .business-chip) {
  font-size: 13px;
}
html[data-theme] .shell :is(.primary, .quiet, .secondary, .buyer-personal-actions button) {
  border-radius: var(--suite-radius);
}
html[data-theme] .shell .buyer-personal-actions .chosen {
  background: var(--suite-selected);
  color: var(--suite-ink);
  border-color: var(--suite-border-strong);
}
html[data-theme] :is(button, select, input, textarea, a, summary):focus-visible {
  outline-color: var(--suite-focus);
}
html[data-theme] :is(.shell .topbar, .reader-header) :focus-visible {
  outline-color: var(--suite-header-text);
}

@media (max-width: 680px) {
  html[data-theme] body[data-workspace-app="unigma"] .shell .sidebar {
    inset-block-end: calc(64px + env(safe-area-inset-bottom, 0px));
    block-size: auto;
    padding-block: 6px;
  }
  html[data-theme] body[data-workspace-app="unigma"] .shell .workspace > main {
    padding-block-end: calc(244px + env(safe-area-inset-bottom, 0px));
  }
}