/* =========================================================
   Shared cross-page theme tokens for stogsdill.net
   Loaded by /contacts/ and /docs/. The values are normally
   overridden at runtime by /shared/theme.js based on the
   active dashboard preset (flutter.dashboard_theme_name in
   localStorage). The defaults below match the dashboard's
   "GitHub Dark" preset so the page is themed even before JS
   runs.
   ========================================================= */

:root,
html[data-stogs-theme] {
  color-scheme: dark;

  /* Surfaces */
  --bg:          #0d1117;
  --surface:     #161b22;
  --surface-2:   #0d1117;
  --surface-3:   #1f2937;
  --elevated:    #1c222b;

  /* Text */
  --text:        #c9d1d9;
  --text-strong: #f0f6fc;
  --muted:       #a8b3bf;
  --subtle:      #8a97a5;

  /* Accents */
  --accent:        #58a6ff;
  --accent-hover:  #79b8ff;
  --accent-soft:   rgba(88,166,255,0.18);
  --accent-softer: rgba(88,166,255,0.10);
  --accent-fg:     #0d1117;
  --accent-2:      #3fb950;

  /* Categories */
  --retailer-bg:  rgba(63,185,80,0.18);
  --retailer-fg:  #56d364;
  --retailer-bd:  rgba(63,185,80,0.35);
  --vendor-bg:    rgba(88,166,255,0.18);
  --vendor-fg:    #79c0ff;
  --vendor-bd:    rgba(88,166,255,0.35);
  --other-bg:     rgba(139,148,158,0.18);
  --other-fg:     #c9d1d9;
  --other-bd:     rgba(139,148,158,0.35);

  /* Semantic */
  --danger:      #f85149;
  --danger-bg:   rgba(248,81,73,0.16);
  --warn:        #d29922;
  --warn-bg:     rgba(210,153,34,0.16);
  --ok:          #3fb950;
  --ok-bg:       rgba(63,185,80,0.16);

  /* Lines */
  --border:        #30363d;
  --border-strong: #444c56;

  /* Layout */
  --radius:    10px;
  --radius-sm: 6px;
  --header-h:  56px;
  --footer-h:  32px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.40);

  /* Cross-page nav pill (auto-themed) */
}

/* Light-mode overrides: applied by theme.js when an active preset
   has a light background. */
html[data-stogs-theme-mode="light"] {
  color-scheme: light;
  --text:        #1e293b;
  --text-strong: #0f172a;
  --muted:       #475569;
  --subtle:      #94a3b8;
  --accent-fg:   #ffffff;
  --retailer-bg: #d1fae5;
  --retailer-fg: #065f46;
  --retailer-bd: #a7f3d0;
  --vendor-bg:   #dbeafe;
  --vendor-fg:   #1e40af;
  --vendor-bd:   #bfdbfe;
  --other-bg:    #f1f5f9;
  --other-fg:    #334155;
  --other-bd:    #e2e8f0;
  --danger:      #dc2626;
  --danger-bg:   #fee2e2;
  --warn:        #b45309;
  --warn-bg:     #fef3c7;
  --ok:          #047857;
  --ok-bg:       #d1fae5;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.10);
}

/* =========================================================
   Cross-page navigation pill (used by /contacts/ and /docs/)
   Themed automatically — overrides legacy inline rules.
   ========================================================= */
.x-nav {
  display: inline-flex;
  gap: .35rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: .25rem .35rem;
  border-radius: 999px;
  font-size: .75rem;
  box-shadow: var(--shadow-sm);
  color: var(--muted);
}
.x-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color .15s, color .15s;
}
.x-nav a:hover {
  background: var(--surface-3);
  color: var(--text-strong);
  text-decoration: none;
}
.x-nav a.current,
.x-nav a[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-fg);
}

/* =========================================================
   Theme picker pill — injected into the top-right of pages.
   Mirrors the dashboard's "GitHub Dark" button look.
   ========================================================= */
.stogs-theme-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .8rem .35rem .55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
.stogs-theme-pill:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.stogs-theme-pill:active { transform: translateY(1px); }
.stogs-theme-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.stogs-theme-pill .swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2, var(--accent-hover)) 100%);
  border: 1px solid var(--border-strong);
  flex: 0 0 auto;
}
.stogs-theme-pill .caret { opacity: .55; font-size: 10px; }

/* Dropdown menu for the theme picker */
.stogs-theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 540px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 9999;
  padding: 6px;
}
.stogs-theme-menu[hidden] { display: none; }
.stogs-theme-menu .group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--subtle);
  padding: 8px 10px 4px;
}
.stogs-theme-menu button.preset {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.stogs-theme-menu button.preset:hover {
  background: var(--surface-3);
  color: var(--text-strong);
}
.stogs-theme-menu button.preset.active {
  background: var(--accent-soft);
  color: var(--text-strong);
  font-weight: 600;
}
.stogs-theme-menu button.preset .swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.25);
  flex: 0 0 auto;
}
.stogs-theme-menu .check {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
}

/* Body-level dark/light affordances some legacy pages can opt into */
html[data-stogs-theme-mode="dark"] body { color-scheme: dark; }
html[data-stogs-theme-mode="light"] body { color-scheme: light; }