/*
 * TokenPilot semantic light-theme aliases and low-risk surface overrides.
 *
 * This 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.
 */

:root{
  --page-bg:var(--surface-page-gradient);
  --surface-bg:var(--panel);
  --surface-bg-muted:var(--panel-2);
  --surface-line:var(--line);
  --text-muted:var(--soft);
  --topbar-surface:linear-gradient(135deg, var(--surface-card) 0%, var(--surface-card-strong) 58%, var(--surface-card-muted) 100%);
  --topbar-border:var(--page-accent-soft-strong, var(--border-strong));
  --topbar-shadow:var(--shadow-floating);
  --topbar-highlight-surface:linear-gradient(112deg, color-mix(in srgb, var(--text-inverse) 12%, transparent) 0%, transparent 27%), linear-gradient(270deg, color-mix(in srgb, var(--page-accent, var(--accent-primary)) 12%, transparent) 0%, transparent 32%);
  --topbar-divider-surface:linear-gradient(90deg, transparent, color-mix(in srgb, var(--page-accent, var(--accent-primary)) 78%, var(--text-inverse) 10%), color-mix(in srgb, var(--page-accent, var(--accent-primary)) 46%, transparent), transparent);
  --active-coin-shadow:var(--shadow-card-soft);
  --overlay-scrim:var(--surface-overlay);
}

:root[data-theme="light"]{
  --page-bg:var(--surface-page-gradient);
  --surface-bg:var(--panel);
  --surface-bg-muted:var(--panel-2);
  --surface-line:var(--line);
  --text-muted:var(--soft);
  --topbar-surface:linear-gradient(180deg, var(--panel), var(--panel-2));
  --topbar-border:var(--line);
  --topbar-shadow:var(--shadow-floating);
  --topbar-highlight-surface:linear-gradient(112deg, color-mix(in srgb, var(--text-inverse) 12%, transparent) 0%, transparent 27%), linear-gradient(270deg, color-mix(in srgb, var(--page-accent, var(--accent-primary)) 12%, transparent) 0%, transparent 32%);
  --topbar-divider-surface:linear-gradient(90deg, transparent, var(--line), transparent);
  --active-coin-shadow:var(--shadow-card-soft);
  --overlay-scrim:var(--surface-overlay);
}

body{
  background:var(--page-bg);
}

.topbar{
  border-color:var(--topbar-border);
  background:var(--topbar-surface);
  box-shadow:var(--topbar-shadow);
}

:root[data-theme="light"] .topbar::before{
  opacity:.28;
}

:root[data-theme="light"] .topbar::after{
  background:var(--topbar-divider-surface);
}

:root[data-theme="light"] .titlebox p,
:root[data-theme="light"] .stat .k,
:root[data-theme="light"] .active-coin-copy span,
:root[data-theme="light"] .active-coin-metrics small{
  color:var(--text-muted);
}

:root[data-theme="light"] .active-coin-float,
:root[data-theme="light"] .active-coin-metrics span{
  border-color:var(--surface-line);
  background:var(--surface-bg);
  box-shadow:var(--active-coin-shadow);
}

:root[data-theme="light"] .active-coin-metrics span{
  background:var(--surface-bg-muted);
}

:root[data-theme="light"] .active-coin-copy strong,
:root[data-theme="light"] .active-coin-metrics strong{
  color:var(--text);
}

.system-offcanvas-notice{
  background:var(--overlay-scrim);
}