@import url('./themes/saves.css');
@import url('./themes/detective.css');
@import url('./themes/maps.css');
@import url('./themes/crosshairs.css');
@import url('./themes/free-games.css');

/* Shared by the shell and embedded tools. Preview pixels and map imagery are not filtered. */
:root:is(.hub-shell, .hub-themed) {
  --hub-bg: #27312f;
  --hub-chrome: #2d3934;
  --hub-panel: #34413c;
  --hub-raised: #3e4e45;
  --hub-inset: #293730;
  --hub-hover: #435849;
  --hub-line: #566c5e;
  --hub-line-soft: #44584c;
  --hub-text: #f1f5ed;
  --hub-secondary: #c3d1c6;
  --hub-muted: #a5b9aa;
  --hub-accent: #d5ecaa;
  --hub-accent-hover: #e3f3c5;
  --hub-accent-soft: #4b6141;
  --hub-on-accent: #24321e;
  --hub-blue: #b1d8e6;
  --hub-amber: #ebc797;
  --hub-error: #f0b8a6;
  --hub-radius: 8px;
  color-scheme: dark !important;
  background: var(--hub-bg);
  color: var(--hub-text);
}

html.hub-shell {
  --panel: var(--hub-panel);
  --line: var(--hub-line-soft);
  --muted: var(--hub-muted);
  --lime: var(--hub-accent);
  --map: #c6e1ad;
  --save: var(--hub-blue);
  --aim: var(--hub-amber);

  body { background: var(--hub-bg); color: var(--hub-text); }
  .header, .workspace-bar { background: var(--hub-chrome); border-color: var(--hub-line); }
  .workspace, .frame-stage > iframe, .frame-loading, .frame-error { background: var(--hub-bg); }
  .brand-light, .nav a, .workspace-heading > strong { color: var(--hub-secondary); }
  .nav a.active, .nav a:hover { color: var(--hub-accent); }
  :is(.brand small, .welcome-note, .hero-copy > p, .hero-trust, .local-pill, .eyebrow,
    .micro, .section-heading h2 > span, .coverage-note, .workspace-hint, .workspace-status) {
    color: var(--hub-muted);
  }
  .search-trigger, kbd { background: var(--hub-panel); border-color: var(--hub-line); color: var(--hub-secondary); }
  :is(.icon-btn, .text-button) { color: var(--hub-secondary); }
  .icon-btn:hover { background: var(--hub-hover); color: var(--hub-accent); }
  .primary { background: var(--hub-accent); color: var(--hub-on-accent); border-color: var(--hub-accent); }
  .primary:hover { background: var(--hub-accent-hover); }
  .secondary { background: var(--hub-raised); color: var(--hub-text); border-color: var(--hub-line); }
  .hero-art { background: radial-gradient(ellipse at center, #60734b45, transparent 70%), #344239; border-color: #5a705a; }
  .map-paper { background: #485d46; border-color: #9bb78b; }
  .art-save, .art-crosshair { background: #384a36; border-color: #809c68; }
  .art-icon { background: #516947; border-color: #7b9869; }
  :is(.art-coordinate, .paper-stamp, .art-footer, .art-crosshair small, .art-save small) { color: #bdd0ac; }
  .tool-card { background: #364a38; border-color: #63815a; }
  .tool-card:hover { background: #40583f; }
  .tool-save { background: #35484b; border-color: #617f86; }
  .tool-save:hover { background: #3e5659; }
  .tool-crosshair { background: #4a4438; border-color: #867456; }
  .tool-crosshair:hover { background: #57503f; }
  .tool-icon { background: #4c6644; border-color: #7a9967; }
  .tool-save .tool-icon { background: #49666e; border-color: #7f9eaa; }
  .tool-crosshair .tool-icon { background: #68553e; border-color: #a98b61; }
  .tool-card > p, .tool-serial, .tool-bottom { color: #bed0b7; }
  .tool-save > p, .tool-save .tool-serial, .tool-save .tool-bottom { color: #bfd5dc; }
  .tool-crosshair > p, .tool-crosshair .tool-serial, .tool-crosshair .tool-bottom { color: #dbcab1; }
  .tool-bottom { border-color: #5b7553; }
  .tool-save .tool-bottom { border-color: #5a7780; }
  .tool-crosshair .tool-bottom { border-color: #7a684e; }
  .tool-bottom b, .tool-card-top > svg { color: var(--hub-text); }
  :is(.recent-section, .game-card, .lower-grid > section, .local-banner) { background: var(--hub-panel); border-color: var(--hub-line); }
  :is(.recent-item, .shortcut, .aim-option, .favorite-chip, .empty-favorites) { background: var(--hub-inset); border-color: var(--hub-line); }
  :is(.recent-item, .shortcut, .aim-option):hover { background: var(--hub-hover); border-color: #8da780; }
  :is(.recent-item small, .game-info p, .game-count, .shortcut p, .aim-option small,
    .empty-favorites, .lower-grid .section-heading h2 > span, .local-banner p) { color: var(--hub-muted); }
  .mini-icon { background: #4a6040; color: #d1e7b8; border-color: #728c62; }
  .mini-icon.saves { background: #405c65; color: var(--hub-blue); border-color: #6d8f9b; }
  .mini-icon.crosshairs { background: #604f3a; color: var(--hub-amber); border-color: #9b805d; }
  :is(.favorite, .game-info .favorite, .favorite-chip > a, .recent-item > svg,
    .shortcut > svg, .lower-grid .section-heading > svg) { color: var(--hub-secondary); }
  .favorite.active { color: var(--hub-accent); }
  .local-banner-icon { background: var(--hub-accent-soft); border-color: #8aa274; color: var(--hub-accent); }
  .local-banner h2, .frame-loading h2, .frame-error h2 { color: var(--hub-text); }
  footer { border-color: var(--hub-line-soft); }
  footer, footer > button, .footer-credit { color: var(--hub-muted); }
  .footer-brand { color: var(--hub-secondary); }
  .workspace-tabs > a { color: var(--hub-secondary); }
  .workspace-tabs > a.active { background: var(--hub-accent-soft); color: var(--hub-accent); }
  dialog { background: var(--hub-panel); color: var(--hub-text); border-color: #7d9770; }
  .search-dialog-top, .search-dialog-bottom, details { border-color: var(--hub-line); }
  .search-dialog-top input { color: var(--hub-text); }
  .search-dialog-top input::placeholder { color: var(--hub-muted); }
  :is(.search-tabs button, .search-count, .search-result small, .result-tag, .search-dialog-bottom,
    .empty-results p, .dialog-intro, details p) { color: var(--hub-muted); }
  .search-tabs button.active, .search-result:hover { background: var(--hub-accent-soft); color: var(--hub-accent); }
  summary, .empty-results h3 { color: var(--hub-text); }
  .toast { background: #46603b; border-color: #9dbb81; color: var(--hub-text); }
}

html.hub-themed {
  body { font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; }
  :is(input, textarea, select) { accent-color: var(--hub-accent); }
  :is(button, a, input, textarea, select, summary):focus-visible { outline-color: var(--hub-accent); }
  ::selection { background: #77965a !important; color: #fff !important; }
  * { scrollbar-color: #71856f transparent; }
}