:root {
  --palette-carbon-black: #1c2321;
  --palette-cool-steel: #7d98a1;
  --palette-blue-slate: #5e6572;
  --palette-powder-blue: #a9b4c2;
  --palette-platinum: #eef1ef;

  --theme-text: var(--palette-carbon-black);
  --theme-text-muted: var(--palette-blue-slate);
  --theme-page: var(--palette-platinum);
  --theme-surface: color-mix(in srgb, var(--palette-platinum) 88%, var(--palette-powder-blue));
  --theme-surface-raised: var(--palette-platinum);
  --theme-surface-muted: color-mix(in srgb, var(--palette-platinum) 68%, var(--palette-powder-blue));
  --theme-border: var(--palette-powder-blue);
  --theme-primary: var(--palette-blue-slate);
  --theme-primary-hover: var(--palette-carbon-black);
  --theme-secondary: var(--palette-cool-steel);
  --theme-danger: var(--palette-carbon-black);
  --theme-focus: var(--palette-cool-steel);
  --theme-inverse-text: var(--palette-platinum);
  --theme-viewer: var(--palette-carbon-black);
  --theme-viewer-border: var(--palette-blue-slate);
  --theme-viewer-muted: var(--palette-powder-blue);
  --theme-shadow: 0 10px 28px color-mix(in srgb, var(--palette-carbon-black) 14%, transparent);

  --q-primary: var(--palette-blue-slate);
  --q-secondary: var(--palette-cool-steel);
  --q-accent: var(--palette-powder-blue);
  --q-dark: var(--palette-carbon-black);
  --q-dark-page: var(--palette-carbon-black);
  --q-positive: var(--palette-cool-steel);
  --q-negative: var(--palette-carbon-black);
  --q-info: var(--palette-cool-steel);
  --q-warning: var(--palette-powder-blue);
}

body,
.q-layout,
.q-page-container {
  color: var(--theme-text);
  background: var(--theme-page);
}

body {
  font-family: "Aptos", "Trebuchet MS", sans-serif;
}

.q-card,
.vibe-card {
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
  background: var(--theme-surface-raised);
  box-shadow: none;
}

.vibe-card--error {
  border-color: var(--palette-carbon-black);
  color: var(--theme-inverse-text);
  background: var(--palette-carbon-black);
}

.vibe-text-muted {
  color: var(--theme-text-muted);
}

.vibe-separator {
  background: var(--theme-border);
}

.vibe-status {
  border: 1px solid currentColor;
}

.vibe-status--queued {
  color: var(--palette-blue-slate);
  background: var(--palette-platinum);
}

.vibe-status--processing {
  color: var(--palette-carbon-black);
  background: var(--palette-powder-blue);
}

.vibe-status--transcribed {
  color: var(--palette-carbon-black);
  background: var(--palette-cool-steel);
}

.vibe-status--failed {
  color: var(--palette-platinum);
  background: var(--palette-carbon-black);
}

.vibe-status--default {
  color: var(--palette-blue-slate);
  background: var(--theme-surface-muted);
}

button:focus-visible,
a:focus-visible,
textarea:focus-visible,
input:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 2px;
}

/* Semantic utility classes for incremental migration away from inline hex styles. */
.ui-text-primary {
  color: var(--theme-text);
}

.ui-text-muted {
  color: var(--theme-text-muted);
}

.ui-text-inverse {
  color: var(--theme-inverse-text);
}

.ui-bg-page {
  background: var(--theme-page);
}

.ui-bg-surface {
  background: var(--theme-surface);
}

.ui-bg-surface-raised {
  background: var(--theme-surface-raised);
}

.ui-bg-surface-muted {
  background: var(--theme-surface-muted);
}

.ui-bg-viewer {
  background: var(--theme-viewer);
}

.ui-bg-viewer-overlay {
  background: color-mix(in srgb, var(--theme-viewer) 50%, transparent);
}

.ui-bg-viewer-overlay-soft {
  background: color-mix(in srgb, var(--theme-viewer) 40%, transparent);
}

.ui-border-subtle {
  border-color: var(--theme-border);
}

.ui-border-viewer {
  border-color: var(--theme-viewer-border);
}

.ui-header-divider {
  border-bottom: 1px solid var(--theme-border);
}

.ui-card-surface {
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
  background: var(--theme-surface-raised);
  border-radius: 0.125rem;
}

.ui-row-surface {
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
  background: var(--theme-surface);
  border-radius: 0.125rem;
}

.ui-note-box {
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
  background: var(--theme-surface);
  border-radius: 0.125rem;
  font-style: italic;
}

.ui-btn-primary {
  color: var(--theme-inverse-text);
  background: var(--theme-primary);
}

.ui-btn-primary:hover {
  background: var(--theme-primary-hover);
}

.ui-btn-secondary {
  color: var(--theme-primary);
  background: transparent;
}

.ui-btn-secondary:hover {
  color: var(--theme-primary-hover);
}

.ui-link-primary {
  color: var(--theme-primary);
}

.ui-link-primary:hover {
  color: var(--theme-primary-hover);
}

.ui-text-accent {
  color: var(--theme-secondary);
}

.ui-text-danger {
  color: var(--theme-danger);
}

.ui-form-surface .q-field__control {
  background: var(--theme-surface-raised);
}

.ui-form-surface .q-field__native,
.ui-form-surface .q-field__input {
  color: var(--theme-text);
}

.ui-form-surface .q-field__marginal {
  color: var(--theme-text-muted);
}

.ui-page-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.ui-page-title {
  color: var(--theme-text);
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.ui-page-subtitle {
  color: var(--theme-text-muted);
  font-size: 0.75rem;
}

/* Table Archival Theme Bridge */
.ui-table {
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
  background: var(--theme-surface-raised);
  border-radius: 0.125rem;
  overflow: hidden;
}

.ui-table .q-table {
  color: var(--theme-text);
}

.ui-table .q-table th,
.ui-table-header {
  color: var(--theme-inverse-text) !important;
  background-color: var(--theme-primary) !important;
  font-weight: 700;
}

.ui-table .q-table td {
  border-bottom: 1px solid var(--theme-border) !important;
  color: var(--theme-text);
}

.ui-table .q-table tbody tr:hover {
  background-color: var(--theme-surface) !important;
  cursor: pointer;
}

.ui-table-body {
  color: var(--theme-text);
}

/* App Shell */
.app-shell {
  min-height: 64px;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid var(--theme-border);
  color: var(--theme-text);
  background: var(--theme-surface-raised);
}

.app-shell__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 1.5rem;
}

.app-shell__brand,
.app-shell__actions {
  align-items: center;
}

.app-shell__brand {
  gap: 0.75rem;
  color: var(--theme-text);
  font-family: Georgia, serif;
  font-weight: 700;
}

.app-shell__brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--theme-inverse-text);
  background: transparent;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.72rem;
}

.app-shell__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-shell__nav-item {
  min-height: 40px;
  color: var(--theme-text-muted);
}

.app-shell__nav-item--active {
  color: var(--theme-primary-hover);
  border-bottom: 3px solid var(--theme-primary);
}

.app-shell__actions {
  justify-content: flex-end;
  gap: 0.75rem;
}

.app-shell__save-state {
  color: var(--theme-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 700px) {
  .app-shell {
    padding-inline: 0.75rem;
  }

  .app-shell__inner {
    grid-template-columns: 1fr auto;
  }

  .app-shell__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }

  .app-shell__brand-name,
  .app-shell__save-state {
    display: none;
  }
}