/* Shared dark/light theming for the Vaarden-tokened pages (hub, index,
   jobs, annotate). theme.js stamps data-theme on <html> before first
   paint; this file only has to override the token values — every page
   already paints itself entirely through the variables.

   Two vocabularies are covered: the Vaarden port names (--bg/--fg/
   --card/--border/--muted) used by hub/index/jobs, and the annotate.css
   aliases (--panel/--line/--text/--text-dim/--accent). Same physical
   palette, different names — override both so one switch flips all. */

:root { color-scheme: dark; }

:root[data-theme="light"] {
  color-scheme: light;

  /* Vaarden names */
  --bg: #f4f4f5;
  --fg: #1a1a1c;
  --muted: #6b6d76;
  --card: #ffffff;
  --border: #dcdce0;
  --splash: #3b6fe0;   /* darker splash — keeps contrast on white */
  --ok: #15803d;
  --warn: #b45309;
  --danger: #dc2626;

  /* annotate.css aliases */
  --panel: #ffffff;
  --panel-2: #ebebed;
  --line: #dcdce0;
  --text: #1a1a1c;
  --text-dim: #6b6d76;
  --accent: #1a1a1c;
  /* Text/icon color on top of accent/ok/danger fills. Dark theme uses
     black on the near-white accent; light theme inverts. */
  --on-accent: #ffffff;
}

/* Floating toggle — injected by theme.js on every themed page. */
.theme-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 2147483000;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border, #262629);
  background: var(--card, var(--panel, #161618));
  color: var(--fg, var(--text, #ededee));
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { border-color: var(--muted, var(--text-dim, #8a8c93)); }
.theme-toggle:active { transform: scale(.94); }

/* Hub chip — sits above the theme toggle; same visual family. Every
   module page gets one (theme.js injects it), so the hub is always
   one tap away from anywhere and vice versa. */
.hub-chip {
  position: fixed; right: 14px; bottom: 60px; z-index: 2147483000;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border, #262629);
  background: var(--card, var(--panel, #161618));
  color: var(--fg, var(--text, #ededee));
  line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hub-chip:hover { border-color: var(--muted, var(--text-dim, #8a8c93)); }
.hub-chip:active { transform: scale(.94); }
/* Docked variant — lives inside a page's [data-hub-dock] slot and
   dresses like that page's own header pills. */
.hub-chip.docked {
  position: static; width: auto; height: auto; padding: 3px 11px;
  border-radius: 999px; box-shadow: none;
  background: transparent;
  color: var(--muted, var(--text-dim, #8a8c93));
  font-size: 11px; letter-spacing: .04em;
}
.hub-chip.docked:hover { color: var(--fg, var(--text, #ededee)); }
.hub-chip.docked:active { transform: none; }