/*
 * ATSURRI compatibility layer for the portfolio's standalone legacy pages.
 * Loaded after each page's embedded styles so their existing layout and
 * interaction contracts stay intact while the brand tokens remain shared.
 */
:root {
  color-scheme: dark;
  --bg: #0a0509;
  --bg2: #150910;
  --bg3: #1b0c15;
  --bg4: #2a1521;
  --accent: #e5197d;
  --accent2: #7e1a3c;
  --accent-low: rgba(229, 25, 125, 0.12);
  --accent-border: rgba(229, 25, 125, 0.38);
  --text: #f1e7e1;
  --text2: #ac8c99;
  --text3: #ac8c99;
  --border: #2a1521;
  --border2: #4b2137;
  --nav-bg: rgba(10, 5, 9, 0.9);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f1e7e1;
  --bg2: #fff9f5;
  --bg3: #e8dad5;
  --bg4: #dccbc6;
  --accent: #a80f5c;
  --accent2: #d11772;
  --accent-low: rgba(168, 15, 92, 0.1);
  --accent-border: rgba(168, 15, 92, 0.36);
  --text: #190b15;
  --text2: #4e3d47;
  --text3: #6e5964;
  --border: rgba(25, 11, 21, 0.1);
  --border2: rgba(25, 11, 21, 0.2);
  --nav-bg: rgba(241, 231, 225, 0.92);
}

.legacy-page,
.legacy-page button,
.legacy-page input,
.legacy-page select,
.legacy-page textarea {
  font-family: var(--font-body) !important;
}

.legacy-page :is(
  h1,
  h2,
  h3,
  .nav-logo,
  .xp-role,
  .hero-tagline,
  .metric-num,
  .tool-name,
  .arch-num,
  .site-header h1,
  .sec-title,
  .kpi-num,
  .chart-title,
  .matrix-name,
  .top-rank,
  .top-name,
  .prob-stat,
  .sol-name,
  .case-icon
) {
  font-family: var(--font-display) !important;
}

.legacy-page :is(
  .header-tag,
  .header-date,
  .sec-label,
  .kpi-source,
  .stat-bar-val,
  .matrix-table th,
  .matrix-chip,
  .detail-tag,
  .top-type,
  .top-data,
  .prob-num,
  .sol-type,
  .case-stage-label,
  .filter-chip,
  .source-org,
  .source-cat,
  .source-link
) {
  font-family: var(--font-technical) !important;
}

.legacy-page .case-wrap::before {
  font-family: var(--font-technical) !important;
}

.legacy-page :is(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.legacy-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-180%);
  border-radius: 999px;
  background: var(--accent);
  color: #0a0509;
  padding: 10px 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease;
}

.legacy-skip:focus {
  transform: translateY(0);
}

.legacy-page .nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.legacy-page .nav-logo img {
  width: 31px;
  height: 25px;
  object-fit: contain;
}

.legacy-page .nav-logo .nav-name {
  color: var(--text);
  font-size: 15px;
  letter-spacing: 0;
}

.legacy-page :is(.cta.primary, .footer-link.primary) {
  color: #0a0509;
}

.dashboard-page .portfolio-return {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.dashboard-page .portfolio-return img {
  width: 31px;
  height: 25px;
}

.dashboard-page .portfolio-return:hover {
  color: var(--text);
}

.dashboard-page .tab-nav {
  background: rgba(10, 5, 9, 0.96);
}

.dashboard-page .bridge-problem {
  width: 100%;
  color: inherit;
  text-align: left;
}

.dashboard-page .bridge-problem[aria-pressed="true"] {
  border-color: var(--accent-border);
  background: var(--accent-low);
}

.dashboard-page .tab-content[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .legacy-page *,
  .legacy-page *::before,
  .legacy-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

@media print {
  :root,
  html[data-theme="light"] {
    --accent: #8f0d4f;
    --accent-low: rgba(143, 13, 79, 0.07);
    --accent-border: rgba(143, 13, 79, 0.3);
  }
}