/*
 * TokenPilot semantic navigation components.
 *
 * This component layer is intentionally not loaded globally yet.
 * It depends on static/css/tokens.css from the token foundation PR and
 * will be enabled later through a controlled single-page cascade pilot.
 */

.app-nav a,
.nav a,
.sidebar-toggle,
.watchlist-toggle,
.panel-toggle{
  color:var(--text-secondary);
  border-color:var(--border-subtle);
  background:transparent;
}

.app-nav a[aria-current="page"],
.app-nav a.active,
.nav a.active,
.nav a[aria-current="page"],
.sidebar-toggle.active,
.watchlist-toggle.active,
.panel-toggle.active{
  color:var(--text-primary);
  border-color:var(--accent-primary-ring);
  background:var(--accent-primary-soft);
}

.topbar,
.statusbar,
.panel,
.card,
.notice{
  color:var(--text-primary);
  border-color:var(--border-subtle);
}

.panel,
.card{
  background:var(--surface-card);
  box-shadow:var(--shadow-panel);
}

.notice,
.empty,
.footer-note,
.small,
.section-head p,
.titlebox p{
  color:var(--text-secondary);
}

/* App navigation accent token layer. */

:root{
  --page-radar-accent:var(--accent-primary);
  --page-spot-accent:var(--state-success);
  --page-investment-accent:color-mix(in srgb, var(--accent-info) 68%, var(--state-success) 32%);
  --page-analysis-accent:color-mix(in srgb, var(--state-success) 72%, var(--state-warning) 28%);
  --page-trading-accent:var(--state-warning);
  --page-monitoring-accent:var(--accent-info);
  --page-scoring-accent:var(--state-warning);
  --page-help-accent:var(--accent-info);
  --page-users-accent:color-mix(in srgb, var(--state-danger) 78%, var(--accent-violet) 22%);
  --page-accent:var(--page-radar-accent);
  --page-accent-soft:color-mix(in srgb, var(--page-accent) 20%, transparent);
  --page-accent-soft-strong:color-mix(in srgb, var(--page-accent) 50%, transparent);
  --page-accent-glow:color-mix(in srgb, var(--page-accent) 18%, transparent);
}

.app-nav{
  --app-nav-border:var(--border-strong);
  --app-nav-surface:linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 84%, transparent), color-mix(in srgb, var(--surface-card-strong) 88%, transparent)), color-mix(in srgb, var(--surface-card) 74%, transparent);
  --app-nav-shadow:var(--shadow-floating);
  --nav-link-shadow:var(--shadow-inset-highlight);
  --nav-icon-shadow:var(--shadow-nav-icon, var(--shadow-card-soft));
  --nav-svg-icon-text:var(--text-inverse);
  --nav-hover-text:var(--text-inverse);
  --nav-hover-surface:linear-gradient(180deg, var(--nav-accent-soft), color-mix(in srgb, var(--surface-card) 8%, transparent));
  --nav-hover-shadow:var(--shadow-floating);
  --nav-active-shadow:var(--shadow-nav-active, var(--shadow-card-soft));
}

:root[data-theme="light"] .app-nav{
  --app-nav-surface:linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 92%, transparent), color-mix(in srgb, var(--surface-card-muted) 92%, transparent));
  --nav-icon-shadow:var(--shadow-nav-icon-light, var(--shadow-card-soft));
  --nav-hover-text:var(--text-primary);
}

.app-nav a{
  --nav-accent:var(--page-radar-accent);
  --nav-accent-soft:color-mix(in srgb, var(--nav-accent) 20%, transparent);
}

.app-nav a[data-page-link="radar"]{
  --nav-accent:var(--page-radar-accent);
}

.app-nav a[data-page-link="spot"]{
  --nav-accent:var(--page-spot-accent);
}

.app-nav a[data-page-link="investment"]{
  --nav-accent:var(--page-investment-accent);
}

.app-nav a[data-page-link="analysis"]{
  --nav-accent:var(--page-analysis-accent);
}

.app-nav a[data-page-link="trading"]{
  --nav-accent:var(--page-trading-accent);
}

.app-nav a[data-page-link="monitoring"]{
  --nav-accent:var(--page-monitoring-accent);
}

.app-nav a[data-page-link="scoring"],
.app-nav a[data-page-link="scoring-config"]{
  --nav-accent:var(--page-scoring-accent);
}

.app-nav a[data-page-link="help"]{
  --nav-accent:var(--page-help-accent);
}

.app-nav a[data-page-link="users"]{
  --nav-accent:var(--page-users-accent);
}

body[data-page="radar"]{
  --page-accent:var(--page-radar-accent);
}

body[data-page="spot"]{
  --page-accent:var(--page-spot-accent);
}

body[data-page="investment"]{
  --page-accent:var(--page-investment-accent);
}

body[data-page="analysis"]{
  --page-accent:var(--page-analysis-accent);
}

body[data-page="trading"]{
  --page-accent:var(--page-trading-accent);
}

body[data-page="monitoring"]{
  --page-accent:var(--page-monitoring-accent);
}

body[data-page="scoring"],
body[data-page="scoring-config"]{
  --page-accent:var(--page-scoring-accent);
}

body[data-page="help"]{
  --page-accent:var(--page-help-accent);
}

body[data-page="users"]{
  --page-accent:var(--page-users-accent);
}

body[data-page="radar"] .app-nav a[data-page-link="radar"],
body[data-page="spot"] .app-nav a[data-page-link="spot"],
body[data-page="investment"] .app-nav a[data-page-link="investment"],
body[data-page="analysis"] .app-nav a[data-page-link="analysis"],
body[data-page="trading"] .app-nav a[data-page-link="trading"],
body[data-page="monitoring"] .app-nav a[data-page-link="monitoring"],
body[data-page="scoring"] .app-nav a[data-page-link="scoring"],
body[data-page="scoring-config"] .app-nav a[data-page-link="scoring-config"],
body[data-page="help"] .app-nav a[data-page-link="help"],
body[data-page="users"] .app-nav a[data-page-link="users"]{
  color:var(--nav-hover-text);
  border-color:color-mix(in srgb, var(--nav-accent) 48%, var(--border-subtle));
  background:linear-gradient(180deg, var(--nav-accent-soft), color-mix(in srgb, var(--surface-card) 10%, transparent));
}