/* Shared theme tokens for all apps-portal pages. Three states:
   - no data-theme attr  -> follow the OS (media query)
   - data-theme="light"  -> forced light (beats a dark OS)
   - data-theme="dark"   -> forced dark  (beats a light OS)
   theme.js sets the attribute from localStorage('ay-theme') before first paint. */
:root {
  --ground: #F4F7F6; --surface: #FFFFFF; --ink: #1E2E36; --muted: #64757D;
  --accent: #0E7C7B; --accent-2: #0A5E5D; --accent-soft: #E4F1EF; --line: #DCE4E2;
  --amber: #A05E0B; --amber-soft: #F6EBD8;
  --shadow: 0 8px 24px rgba(20, 55, 60, 0.08);
  --glow: rgba(14, 124, 123, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F181C; --surface: #182731; --ink: #E9EFED; --muted: #9BADB3;
    --accent: #3FB5AC; --accent-2: #58C7BE; --accent-soft: #14302F; --line: #27383F;
    --amber: #DFA45A; --amber-soft: #322610;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --glow: rgba(63, 181, 172, 0.10);
  }
}
:root[data-theme="dark"] {
  --ground: #0F181C; --surface: #182731; --ink: #E9EFED; --muted: #9BADB3;
  --accent: #3FB5AC; --accent-2: #58C7BE; --accent-soft: #14302F; --line: #27383F;
  --amber: #DFA45A; --amber-soft: #322610;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --glow: rgba(63, 181, 172, 0.10);
}

/* The client wordmark is pure black on transparent — invert to white on dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark { filter: invert(1); }
}
:root[data-theme="dark"] .wordmark { filter: invert(1); }

/* Theme toggle button (pages place <button id="theme-toggle"> where they want it). */
#theme-toggle {
  width: 36px; height: 36px; flex: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  color: var(--muted); font-size: 1rem; line-height: 1; padding: 0;
}
#theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
#theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }