:root {
  --jgo-page: #f5f5f7;
  --jgo-surface: #ffffff;
  --jgo-surface-raised: #ffffff;
  --jgo-surface-soft: #f6f9fd;
  --jgo-ink: #172b46;
  --jgo-muted: #55677f;
  --jgo-line: #dce5ef;
}

#page-container { background: var(--jgo-page); }

.jnav-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--jgo-line);
  border-radius: 9px;
  background: transparent;
  color: var(--jgo-ink);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}
.jnav-theme-toggle:hover { border-color: var(--apple-blue, #0071e3); }
.jnav-theme-toggle:focus-visible { outline: 3px solid var(--apple-blue, #0071e3); outline-offset: 2px; }
.jnav-theme-toggle i { font-size: 15px; }
.jnav-theme-toggle span { display: none; }

html[data-jgo-theme="dark"] {
  color-scheme: dark;
  --jgo-page: #000520;
  --jgo-surface: #040b22;
  --jgo-surface-raised: #091630;
  --jgo-surface-soft: #07132c;
  --jgo-ink: #ecf4ff;
  --jgo-muted: #a7bdd8;
  --jgo-line: #203456;
  --jgo-action: #bfd7f8;
  --jgo-action-hover: #d6e6fa;
  --jgo-accent: #bfd7f8;
  --apple-blue: #bfd7f8 !important;
  --apple-blue-rgb: 191, 215, 248 !important;
  --apple-blue-hover: #d6e6fa !important;
  --apple-bg: var(--jgo-page);
  --apple-canvas: var(--jgo-surface);
  --apple-card-bg: var(--jgo-surface);
  --apple-card-border: var(--jgo-line);
  --apple-subtle-fill: #07132c;
  --apple-text-primary: var(--jgo-ink);
  --apple-text-secondary: var(--jgo-muted);
  --apple-text-tertiary: #93abc9;
  --apple-text-quaternary: #829bbd;
}

html[data-jgo-theme="dark"] #page-container { background: var(--jgo-page) !important; color: var(--jgo-ink); }
html[data-jgo-theme="dark"] #page-contents { --jui-line: var(--jgo-line); --jui-muted: var(--jgo-muted); }
html[data-jgo-theme="dark"] #footer .card { background: var(--jgo-surface); color: var(--jgo-muted); border: 1px solid var(--jgo-line) !important; }
html[data-jgo-theme="dark"] #footer .text-secondary { color: var(--jgo-muted) !important; }
html[data-jgo-theme="dark"] .jnav,
html[data-jgo-theme="dark"] .jnav-command {
  --nav-ink: var(--jgo-ink);
  --nav-muted: var(--jgo-muted);
  --nav-line: var(--jgo-line);
  --nav-dark: var(--jgo-accent);
}
html[data-jgo-theme="dark"] .jnav { background: var(--jgo-page); }
html[data-jgo-theme="dark"] .jnav-brand img { background: #f4f7fa; border-radius: 5px; padding: 3px; }
html[data-jgo-theme="dark"] .jnav-panel,
html[data-jgo-theme="dark"] .jnav-profile-panel,
html[data-jgo-theme="dark"] .jnav-command { background: var(--jgo-surface-raised); color: var(--jgo-ink); }
html[data-jgo-theme="dark"] .jnav-context { background: var(--jgo-surface); border-top-color: var(--jgo-line); }
html[data-jgo-theme="dark"] .jnav-profile-heading,
html[data-jgo-theme="dark"] .jnav-command footer { background: var(--jgo-surface-soft); }
html[data-jgo-theme="dark"] .jnav-search-trigger,
html[data-jgo-theme="dark"] .jnav-theme-toggle,
html[data-jgo-theme="dark"] .jnav-mobile-toggle,
html[data-jgo-theme="dark"] .jnav-command-input,
html[data-jgo-theme="dark"] .jnav kbd,
html[data-jgo-theme="dark"] .jnav-command kbd { background: var(--jgo-surface-soft); color: var(--jgo-ink); }
html[data-jgo-theme="dark"] .jnav-theme-toggle { background: transparent; }
html[data-jgo-theme="dark"] .jnav-link:hover,
html[data-jgo-theme="dark"] .jnav-link[aria-expanded="true"],
html[data-jgo-theme="dark"] .jnav-destination:hover,
html[data-jgo-theme="dark"] .jnav-command-result:hover,
html[data-jgo-theme="dark"] .jnav-command-result.is-highlighted { background: var(--jgo-surface-soft); }
html[data-jgo-theme="dark"] .jnav-join { background: var(--jgo-action); color: var(--jgo-page); }
html[data-jgo-theme="dark"] .jnav-join:hover { background: var(--jgo-action-hover); color: var(--jgo-page); }
html[data-jgo-theme="dark"] .jnav-panel-heading button,
html[data-jgo-theme="dark"] .jnav-command-heading button { background: var(--jgo-surface-soft); color: var(--jgo-ink); }
html[data-jgo-theme="dark"] .jnav-logout { color: #ffb4b4; }
html[data-jgo-theme="dark"] .jnav-logout:hover { background: #46313d; color: #ffd5d5; }
html[data-jgo-theme="dark"] .jpt-bell { background: transparent; color: var(--jgo-ink); border-color: var(--jgo-line); }
html[data-jgo-theme="dark"] .jpt-bell > span { border-color: var(--jgo-surface); }
html[data-jgo-theme="dark"] .jpt-bell > span { background: var(--jgo-accent); color: var(--jgo-page); }
html[data-jgo-theme="dark"] .jnav-skip { background: var(--jgo-accent); color: var(--jgo-page); }
html[data-jgo-theme="dark"] .jpt-notice-icon { background: var(--jgo-surface-raised); color: var(--jgo-accent); }

/* Shared form and content surfaces let other frontend pages remain usable while
   their page-specific styles are moved to semantic tokens in later passes. */
html[data-jgo-theme="dark"] #page-contents .card,
html[data-jgo-theme="dark"] #page-contents .modal-content,
html[data-jgo-theme="dark"] #page-contents .dropdown-menu { background-color: var(--jgo-surface); color: var(--jgo-ink); border-color: var(--jgo-line); }
html[data-jgo-theme="dark"] #page-contents .card-header,
html[data-jgo-theme="dark"] #page-contents .card-footer,
html[data-jgo-theme="dark"] #page-contents .list-group-item,
html[data-jgo-theme="dark"] #page-contents .table { background-color: var(--jgo-surface); color: var(--jgo-ink); border-color: var(--jgo-line); }
html[data-jgo-theme="dark"] #page-contents .form-control,
html[data-jgo-theme="dark"] #page-contents .form-select { background-color: var(--jgo-surface-soft); color: var(--jgo-ink); border-color: var(--jgo-line); }
html[data-jgo-theme="dark"] #page-contents .form-control::placeholder { color: var(--jgo-muted); }
html[data-jgo-theme="dark"] #page-contents .text-muted,
html[data-jgo-theme="dark"] #page-contents .text-secondary { color: var(--jgo-muted) !important; }
html[data-jgo-theme="dark"] #page-contents .text-dark { color: var(--jgo-ink) !important; }
html[data-jgo-theme="dark"] #page-contents .bg-light { background: var(--jgo-surface-soft) !important; }
html[data-jgo-theme="dark"] #page-contents .btn-primary { background: var(--jgo-action) !important; border-color: var(--jgo-action) !important; color: var(--jgo-page) !important; }
html[data-jgo-theme="dark"] #page-contents .btn-primary:hover { background: var(--jgo-action-hover) !important; border-color: var(--jgo-action-hover) !important; color: var(--jgo-page) !important; }