/**
 * Shell directions — Aurora, Porcelain, Graphite.
 *
 * Only TOKENS change between them; every component keeps one set of rules and
 * reads `--sh-*`. A direction that needed its own layout rules would be a
 * fourth component tree to maintain, which is what the prototype's token-only
 * approach was designed to avoid.
 *
 * Applied as `data-shell-theme` on <html>. Aurora is the default and is defined
 * on the bare selector, so a user who has never chosen keeps today's look.
 */

:root,
:root[data-shell-theme='aurora'] {
  /* A — AURORA: the brand gradient, which is what the app wears today. */
  --sh-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --sh-header-border: transparent;
  --sh-fg: #ffffff;
  --sh-fg-dim: rgba(255, 255, 255, 0.82);
  --sh-hover: rgba(255, 255, 255, 0.12);
  --sh-active: rgba(255, 255, 255, 0.18);
  --sh-search-bg: rgba(255, 255, 255, 0.14);
  --sh-search-border: rgba(255, 255, 255, 0.28);
  --sh-search-fg: #ffffff;
  --sh-search-ph: rgba(255, 255, 255, 0.65);
  --sh-accent: #667eea;
  --sh-focus: rgba(255, 255, 255, 0.6);

  /* Sub-bar: the page title strip under the header. */
  --sh-subbar-bg: #ffffff;
  --sh-subbar-line: #e2e8f0;
  --sh-subbar-fg: #1e293b;
  --sh-subbar-dim: #64748b;

  /* Dock */
  --sh-dock-bg: #ffffff;
  --sh-dock-line: #e2e8f0;
  --sh-dock-fg: #64748b;
  --sh-dock-active: #667eea;

  --sh-chip-bg: rgba(255, 255, 255, 0.12);
  --sh-avatar-bg: rgba(255, 255, 255, 0.22);
  --sh-avatar-fg: #ffffff;
}

/* B — PORCELAIN: light and quiet; the gradient is spent on the logo mark and
   primary CTAs only, so the chrome stops competing with page content. */
:root[data-shell-theme='porcelain'] {
  --sh-header-bg: #ffffff;
  --sh-header-border: #e2e8f0;
  --sh-fg: #1e293b;
  --sh-fg-dim: #64748b;
  --sh-hover: #f1f5f9;
  --sh-active: rgba(102, 126, 234, 0.1);
  --sh-search-bg: #f1f5f9;
  --sh-search-border: #e2e8f0;
  --sh-search-fg: #1e293b;
  --sh-search-ph: #94a3b8;
  --sh-accent: #5563d4;
  --sh-focus: rgba(102, 126, 234, 0.55);

  --sh-subbar-bg: #f8fafc;
  --sh-subbar-line: #e2e8f0;
  --sh-subbar-fg: #1e293b;
  --sh-subbar-dim: #64748b;

  --sh-dock-bg: #ffffff;
  --sh-dock-line: #e2e8f0;
  --sh-dock-fg: #64748b;
  --sh-dock-active: #5563d4;

  --sh-chip-bg: #f1f5f9;
  --sh-avatar-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --sh-avatar-fg: #ffffff;
}

/* C — GRAPHITE: dark slate chrome, light page. The sub-bar is tinted so the
   header and the title strip read as one piece rather than a dark bar with a
   white shelf stuck under it. */
:root[data-shell-theme='graphite'] {
  --sh-header-bg: #0f172a;
  --sh-header-border: #1e293b;
  --sh-fg: #e2e8f0;
  --sh-fg-dim: #94a3b8;
  --sh-hover: rgba(148, 163, 184, 0.14);
  --sh-active: rgba(129, 140, 248, 0.22);
  --sh-search-bg: rgba(148, 163, 184, 0.12);
  --sh-search-border: rgba(148, 163, 184, 0.25);
  --sh-search-fg: #e2e8f0;
  --sh-search-ph: #94a3b8;
  --sh-accent: #818cf8;
  --sh-focus: rgba(129, 140, 248, 0.6);

  --sh-subbar-bg: #1e293b;
  --sh-subbar-line: #334155;
  --sh-subbar-fg: #e2e8f0;
  --sh-subbar-dim: #94a3b8;

  --sh-dock-bg: #111827;
  --sh-dock-line: #1f2937;
  --sh-dock-fg: #94a3b8;
  --sh-dock-active: #818cf8;

  --sh-chip-bg: rgba(148, 163, 184, 0.14);
  --sh-avatar-bg: rgba(129, 140, 248, 0.3);
  --sh-avatar-fg: #e2e8f0;
}

/* ---------------------------------------------------------------------------
   Component rules.

   Prefixed with :root deliberately. AppHeaderWithMenu.css and TopNavMenu.css
   are imported AFTER this file and set the same properties at plain class
   specificity, so an unprefixed rule here loses on source order and the header
   stayed Aurora whatever was picked. `:root .x` is (0,2,0) against (0,1,0) and
   wins regardless of order.

   Everything below reads a token, so one block serves all three directions.
   --------------------------------------------------------------------------- */

:root .app-header-menu {
  background: var(--sh-header-bg);
  border-bottom: 1px solid var(--sh-header-border);
  color: var(--sh-fg);
}

:root .app-header-menu__title {
  color: var(--sh-fg);
}

:root .app-header-menu__subtitle {
  color: var(--sh-fg-dim);
}

/* Nav triggers */
:root .top-nav__link {
  color: var(--sh-fg-dim);
}

:root .top-nav__link:hover {
  background: var(--sh-hover);
  color: var(--sh-fg);
}

:root .top-nav__link--active,
:root .top-nav__link--open {
  background: var(--sh-active);
  color: var(--sh-fg);
}

/* User button, avatar, chevron and the hamburger all assumed white-on-gradient. */
:root .app-header-menu__user-btn,
:root .app-header-menu__hamburger {
  background: var(--sh-chip-bg);
  color: var(--sh-fg);
}

:root .app-header-menu__user-btn:hover,
:root .app-header-menu__hamburger:hover {
  background: var(--sh-hover);
}

:root .app-header-menu__user-name {
  color: var(--sh-fg);
}

:root .app-header-menu__user-avatar {
  background: var(--sh-avatar-bg);
  color: var(--sh-avatar-fg);
}

:root .app-header-menu__chevron {
  color: var(--sh-fg-dim);
}

:root .app-header-menu__hamburger-line {
  background: var(--sh-fg);
}

/* Header search trigger */
:root .cd-search-trigger {
  background: var(--sh-search-bg);
  border-color: var(--sh-search-border);
  color: var(--sh-fg);
}

:root .cd-search-trigger:hover,
:root .cd-search-trigger.active {
  background: var(--sh-hover);
}

/* Pinned chips */
:root .app-header-menu__fav {
  background: var(--sh-chip-bg);
  color: var(--sh-fg);
}

:root .app-header-menu__fav:hover {
  background: var(--sh-hover);
}

/* The brand mark is the Home button, so it needs to read as one on every
   ground. A tinted, rounded target does that without boxing the logo into a
   coloured tile — the earlier gradient chip fought the mark's own orange. */
:root .app-header-menu__logo-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 7px;
  border-radius: 10px;
  background: transparent;
  transition: background 0.15s ease;
}

:root .app-header-menu__logo-link:hover {
  background: var(--sh-hover);
}

:root .app-header-menu__logo-link:focus-visible {
  outline: 2px solid var(--sh-focus);
  outline-offset: 1px;
}

/* On the two light grounds the mark sits on white and loses its edge; a hairline
   ring and a faint tint give it the same presence it has on the gradient. */
:root[data-shell-theme='porcelain'] .app-header-menu__logo-link {
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px var(--gray-200, #e2e8f0);
}

:root[data-shell-theme='porcelain'] .app-header-menu__logo-link:hover {
  background: #eef2ff;
}

:root .top-nav__error,
:root .top-nav__retry {
  color: var(--sh-fg);
}

:root :focus-visible {
  outline-color: var(--sh-focus);
}