/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: existing Workbench/portal
 * design-system: design.md · designed-as-app · user-approved graphite blue-grey
 * Scope: palette only; layout, copy, controls and business semantics retained.
 * Review: desktop/mobile hierarchy retained; legacy white surfaces and dark-on-dark
 * labels corrected from rendered states, including hover, focus, errors and dialogs.
 * Existing brand imagery is preserved. Validation uses isolated fixture pages;
 * screenshots/contrast evidence: artifacts/graphite-20260909-visual (not live proof).
 */

/* Bridge the legacy semantic variables without activating legacy theme branches. */
html,
html[data-theme="graphite"] body,
html[data-theme] body {
  --fx-bg: var(--ui-canvas);
  --fx-surface: var(--ui-paper);
  --fx-soft: var(--ui-soft);
  --fx-surface-soft: var(--ui-soft);
  --fx-line: var(--ui-line);
  --fx-line-soft: var(--ui-line);
  --fx-text: var(--ui-ink);
  --fx-heading: var(--ui-ink);
  --fx-muted: var(--ui-muted);
  --fx-blue: var(--ui-accent);
  --fx-blue-strong: var(--ui-accent-hover);
  --fx-accent: var(--ui-accent);
  --fx-accent-strong: var(--ui-accent-hover);
  --fx-accent-soft: var(--ui-soft);
  --fx-green: var(--ui-success);
  --fx-success: var(--ui-success);
  --fx-red: var(--ui-danger);
  --fx-danger: var(--ui-danger);
  --fx-amber: var(--ui-warning);
  --fx-warning: var(--ui-warning);
  --fx-shadow: 0 8px 24px var(--ui-shadow);
  --fx-shadow-soft: 0 2px 8px var(--ui-shadow);
  color: var(--ui-ink);
  background: var(--ui-canvas);
}
html[data-theme="graphite"] body.authViewActive {
  --color-auth-paper: var(--ui-paper);
  --color-auth-paper-2: var(--ui-soft);
  --color-auth-ink: var(--ui-ink);
  --color-auth-muted: var(--ui-muted);
  --color-auth-rule: var(--ui-control-line);
  --color-auth-accent: var(--ui-accent);
  --color-auth-accent-hover: var(--ui-accent-hover);
  --color-auth-accent-ink: var(--ui-accent-ink);
  --color-auth-focus: var(--ui-focus);
}
html[data-theme="graphite"] body :is(.main, .landingPage, .corpLanding, .publicPortalPage) {
  color: var(--ui-ink);
  background: var(--ui-canvas);
}
html[data-theme="graphite"] body :is(h1, h2, h3, h4, h5, h6) { color: var(--ui-ink); }
html[data-theme="graphite"] body :is(.muted, .hint, .authStatus, #eyebrow, .panelHead p, .panelHead small) { color: var(--ui-muted); }
html[data-theme="graphite"] body ::selection { color: var(--ui-accent-ink); background: var(--ui-accent); }

/* App surfaces: one quiet elevation step per existing content group. */
html[data-theme="graphite"] body :is(.side, .top, .siteUtilityBar, .panel, .metric, .authBox,
  .quickActions, .providerCard, .rankingCard, .rankingToolbar, .rankingSearch,
  .copyHero, .copyQuickSetup, .copyGroupCard, .copyAccountCard, .copyStepCard,
  .localServicePanel, .copyManagerPanel, .copyFocusPanel, .copyRiskPanel,
  .copyExceptionPanel, .copyLivePanel, .copyFollowerCard, .copyConfigBlock,
  .copyManagerAccountBlock, .copyManagerSplit > section, .copyManagerField,
  .copyManagerEmpty, .copyManagerLog, .copyAdvancedMini, .copyAdminDetails,
  .myCopyCard, .myCopyCardBody, .myCopyTables section, .myCopyTop,
  .businessCard, .profileSecurityPanel, .profilePreview, .profileWalletCard,
  .walletBalanceCard, .walletVoucherCard, .walletPayBlock, .walletCheckoutSummary,
  .walletRecordsCard, .walletHeader > div, .walletTxItem, .settingsSection,
  .eaProductCard, .eaLicenseCard, .eaReviewItem, .eaSupportItem,
  .eaVersionEntry, .eaReviewForm, .eaAuthorReply, .adminEaVersionRow,
  .actionDisclosure, .adminCreateAccountBox, .adminSearchPanel,
  .noticePanel, .riskItem, .roleCard, .sourceStatCard, .tableWrap) {
  color: var(--ui-ink);
  background: var(--ui-paper);
  border-color: var(--ui-line);
  box-shadow: none;
}
html[data-theme="graphite"] body :is(.chart, .secondaryChartPanel, .productCurve, .productWindow,
  .accountTabs, .accountArchiveTabs, .copyMetric, .copyHealthPill,
  .localServiceCard, .copyQuickOptions, .copyRiskCard, .copyRiskSwitches,
  .copyRuleLine, .copyLatest, .copyServerReuse, .copyTimelineItem,
  .copyRealtimeAlerts article, .myCopyMetaGrid span, .kvItem,
  .businessMetrics > span, .businessTags span, .eaProductFacts > span,
  .eaProductDetailSummary dl div, .eaSupportMessages p, .eaHeroStats,
  .subscriptionMetricGrid span, .copyRiskSummary span, .copyExceptionSummary span,
  .subscriptionSummary > div, .subscriptionSignalSummary, .subscriptionRiskLead,
  .subscriptionRiskAdvanced, .dialogRiskCheck, .checkLine, .compactCheck,
  .simpleOptions, .adminSearchStats span, .adminEaProductSummary span,
  .clientLoginResult, .serverSuggestPanel) {
  color: var(--ui-ink);
  background: var(--ui-soft);
  border-color: var(--ui-line);
  box-shadow: none;
}
html[data-theme="graphite"] body :is(.panel, .metric, .copyMetric, .businessMetrics, .walletMethod,
  .walletBalanceCard, .profileWalletCard, .eaProductFacts, .eaHeroStats,
  .subscriptionMetricGrid, .copyRiskSummary, .copyExceptionSummary,
  .providerCard, .kvItem) :is(b, strong) { color: var(--ui-ink); }
html[data-theme="graphite"] body :is(.metric > span, .copyMetric > span, .businessMetrics span,
  .kvItem > span, .providerCard small, .eaProductFacts span, .eaHeroStats > span,
  .eaProductBody > p, .eaProductBody > small, .eaMarketFilterRow > span,
  .eaMarketSearch > span, .walletMethod > span, .walletTxItem small,
  .subscriptionMetricGrid span, .copyRiskSummary span, .copyExceptionSummary span) { color: var(--ui-muted); }
html[data-theme="graphite"] body :is(.emptyState, .adminSearchEmpty, .corpSignalEmpty) {
  color: var(--ui-muted);
  background: var(--ui-soft);
  border-color: var(--ui-line);
}

/* Inputs remain visibly distinct from cards; focus is never conveyed by hue alone. */
html[data-theme="graphite"] body :is(button, input, select, textarea),
html[data-theme="graphite"] body:not(.landingActive) :is(button, input, select, textarea) {
  color: var(--ui-ink);
  background-color: var(--ui-soft);
  border-color: var(--ui-control-line);
  box-shadow: none;
}
html[data-theme="graphite"] body :is(input, textarea)::placeholder { color: var(--ui-muted); opacity: 1; }
html[data-theme="graphite"] body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ui-accent); }
html[data-theme="graphite"] body option { color: var(--ui-ink); background: var(--ui-raised); }
html[data-theme="graphite"] body :is(button, input, select, textarea, summary, a):focus-visible {
  outline-color: var(--ui-focus);
  box-shadow: none;
}
html[data-theme="graphite"] body :is(input, select, textarea):focus-visible { border-color: var(--ui-focus); }
html[data-theme="graphite"] body :is(button, select, input, textarea):disabled {
  color: var(--ui-muted);
  background-color: var(--ui-soft);
  border-color: var(--ui-line);
}
html[data-theme="graphite"] body :is(.secondaryButton, .ghostButton, .miniAction, .iconButton,
  .fileButton, .plainSwitch, .walletAmountButton, .walletCustomAmount,
  .walletMethod, .eaAssetLink, .strategyAvatarUploadButton),
html[data-theme="graphite"] body :is(.pager, .quickActions, .rankingActions, .miniToolBar,
  .rankingFilters, .eaMarketFilters, .accountTabs, .accountArchiveTabs,
  .subscriptionPaymentMethods) button {
  color: var(--ui-ink);
  background: var(--ui-soft);
  border-color: var(--ui-control-line);
  box-shadow: none;
}
html[data-theme="graphite"] body :is(.secondaryButton, .ghostButton, .miniAction, .iconButton,
  .fileButton, .plainSwitch, .walletAmountButton, .walletMethod, .eaAssetLink):hover:not(:disabled),
html[data-theme="graphite"] body :is(.pager, .quickActions, .rankingActions, .miniToolBar,
  .rankingFilters, .eaMarketFilters, .accountTabs) button:hover:not(:disabled) {
  color: var(--ui-ink);
  background: var(--ui-raised);
  border-color: var(--ui-focus);
  box-shadow: none;
}
html[data-theme="graphite"] body :is(#refreshBtn, .subscribeButton, .corpPrimaryButton, .corpHeroPrimary,
  .corpSectionPrimary, .walletPayButton, .rankingFilters button.active,
  .eaMarketFilters button.active, .accountTabs button.active,
  .accountArchiveTabs button.active, .walletAmountButton.active),
html[data-theme="graphite"] body :is(.authBox, .loginActions) > button:not(.secondaryButton),
html[data-theme="graphite"] body :is(.copyQuickFooter, .copyTradeForm) > button,
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard .loginForm > button[type="submit"] {
  color: var(--ui-accent-ink);
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  box-shadow: none;
}
html[data-theme="graphite"] body :is(#refreshBtn, .subscribeButton, .corpPrimaryButton, .corpHeroPrimary,
  .corpSectionPrimary, .walletPayButton):hover:not(:disabled),
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard .loginForm > button[type="submit"]:hover:not(:disabled) {
  color: var(--ui-accent-ink);
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}
html[data-theme="graphite"] body :is(.walletMethod.active, .roleCard.active, .adminEaVersionRow.current,
  .eaVersionEntry.current) { color: var(--ui-ink); background: var(--ui-raised); border-color: var(--ui-focus); }
html[data-theme="graphite"] body :is(.dangerButton, .deleteButton) {
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
  border-color: var(--ui-danger);
}
html[data-theme="graphite"] body :is(.linkButton, .textButton) { color: var(--ui-accent); background: none; }

/* Navigation, language popover and footer use the same graphite chrome. */
html[data-theme="graphite"] body :is(.brand, .siteFooterBrand, .corpBrand) :is(strong, b) { color: var(--ui-ink); }
html[data-theme="graphite"] body :is(.brand, .siteFooterBrand, .corpBrand) :is(span, small) { color: var(--ui-muted); }
html[data-theme="graphite"] body :is(.side .shellSwitch, .navGroup.publicNav, .side details.navGroup,
  .userBackendNav, .adminNav, .mobileBottomNav, .siteFooter, .corpFooter,
  .publicCorpHeader, .corpNavMenu > div, .languageMenu) {
  color: var(--ui-ink);
  background: var(--ui-paper);
  border-color: var(--ui-line);
  box-shadow: none;
}
html[data-theme="graphite"] body :is(.side, .corpNav, .siteFooterNav, .corpFooterColumns, .mobileBottomNav) :is(button, a, summary) {
  color: var(--ui-muted);
  background: none;
  border-color: var(--ui-line);
  box-shadow: none;
}
html[data-theme="graphite"] body :is(.side, .corpNav, .siteFooterNav, .corpFooterColumns, .mobileBottomNav) :is(button, a, summary):hover {
  color: var(--ui-accent);
  background: var(--ui-soft);
  border-color: var(--ui-line);
}
html[data-theme="graphite"] body :is(.side, .corpNav, .mobileBottomNav) :is(button.active, summary.active) {
  color: var(--ui-accent);
  background: var(--ui-soft);
  border-color: var(--ui-control-line);
}
html[data-theme="graphite"] body .side .authBox > button:not(.secondaryButton) { color: var(--ui-accent-ink); background: var(--ui-accent); border-color: var(--ui-accent); }
html[data-theme="graphite"] body:not(.landingActive) .side .navGroup > button,
html[data-theme="graphite"] body:not(.landingActive) .side .shellSwitch :is(button, span) {
  color: var(--ui-muted); background: none; border-color: var(--ui-line); box-shadow: none;
}
html[data-theme="graphite"] body:not(.landingActive) .side .navGroup > button:is(.active, :hover),
html[data-theme="graphite"] body:not(.landingActive) .side .shellSwitch button:is(.active, :hover) {
  color: var(--ui-accent); background: var(--ui-soft); border-color: var(--ui-control-line); box-shadow: none;
}
html[data-theme="graphite"] body:not(.landingActive):not(.authViewActive) .mobileBottomNav {
  color: var(--ui-muted); background: var(--ui-paper); border-color: var(--ui-line); box-shadow: none;
}
html[data-theme="graphite"] body:not(.landingActive) .side :is(button, summary) > span,
html[data-theme="graphite"] body:not(.landingActive) .side .navGroup > span {
  color: var(--ui-muted);
}
html[data-theme="graphite"] body:not(.landingActive) .side button:is(.active, :hover) > span { color: var(--ui-accent); }
html[data-theme="graphite"] body:not(.landingActive):not(.authViewActive) .mobileBottomNav button {
  color: var(--ui-muted); background: var(--ui-paper); border-color: var(--ui-line); box-shadow: none;
}
html[data-theme="graphite"] body:not(.landingActive):not(.authViewActive) .mobileBottomNav button.active {
  color: var(--ui-accent); background: var(--ui-soft); border-color: var(--ui-control-line);
}
html[data-theme="graphite"] body .mobileBottomNav button > span { color: inherit; }
html[data-theme="graphite"] body :is(.siteFooterBottom, .siteFooterBrand span, .corpFooterBottom,
  .corpFooterBottom p, .corpFooterBottom span, .siteFooterNavGroup b, .corpFooterColumns b) { color: var(--ui-muted); border-color: var(--ui-line); }
html[data-theme="graphite"] body :is(.siteUtilityBar .languageToggle, .languageSwitcher.open .languageToggle),
html[data-theme="light"] body.landingActive .siteUtilityBar .languageToggle {
  color: var(--ui-ink);
  background: var(--ui-soft);
  border-color: var(--ui-control-line);
  box-shadow: none;
}
html[data-theme="graphite"] body .languageToggleIcon { color: var(--ui-muted); background: var(--ui-raised); }
html[data-theme="graphite"] body .languageOption { color: var(--ui-ink); background: none; }
html[data-theme="graphite"] body :is(.languageOption:hover, .languageOption.active) { color: var(--ui-accent); background: var(--ui-soft); }

/* Signal lists/details: muted metadata, numeric profit/loss handled below. */
html[data-theme="graphite"] body:not(.landingActive) :is(#rankingsView .rankingCard, .rankingList.compact .rankingCard) {
  color: var(--ui-ink); background: var(--ui-paper); border-color: var(--ui-line);
}
html[data-theme="graphite"] body:not(.landingActive) .rankingCard:hover { background: var(--ui-paper); border-color: var(--ui-control-line); }
html[data-theme="graphite"] body :is(.rankingTitleRow h3, .rankingMetric b, .rankingScore b) { color: var(--ui-ink); }
html[data-theme="graphite"] body :is(.rankingMetric span, .rankingToolbar span, .rankingSubline,
  .rankingAccountLine, .rankingSearch label > span, .rankingSearch > small) { color: var(--ui-muted); }
html[data-theme="graphite"] body :is(.rankingTag, .copyBadge, .statusPill, .roleBadge, .healthBadge,
  .rankingScore, .modeBadge, .modeBadge.user, .businessTags span,
  .landingSignalTags span, .corpSignalTags span, .eaProductBadges span) {
  color: var(--ui-muted); background: var(--ui-soft); border-color: var(--ui-line);
}
html[data-theme="graphite"] body:not(.landingActive) .rankingMetric { background: none; border-color: var(--ui-line); }
html[data-theme="graphite"] body :is(.rankingSubscribeInline, .rankingSubscribe) { color: var(--ui-ink); background: none; }
html[data-theme="graphite"] body .rankingSubscribeInline > span { color: var(--ui-muted); }
html[data-theme="graphite"] body .rankingAccountLine span { color: var(--ui-muted); }
html[data-theme="graphite"] body .rankingScore span { color: var(--ui-muted); }
html[data-theme="graphite"] body :is(.sectionHeadingIcon, .scoreIcon) { color: var(--ui-accent); background: var(--ui-soft); border-color: var(--ui-line); }
html[data-theme="graphite"] body :is(.rankingTag.demo, .rankingTag.live, .modeBadge) { color: var(--ui-accent); }
html[data-theme="graphite"] body :is(.riskBar, .originBar, .progressBar) { background: var(--ui-soft); }
html[data-theme="graphite"] body :is(.riskBar i, .originBar i, .progressBar i) { background: var(--ui-accent); }

/* Tables retain row boundaries and do not erase numeric semantic classes. */
html[data-theme="graphite"] body :is(table, .strategyManageTable) { color: var(--ui-ink); background: var(--ui-paper); border-color: var(--ui-line); }
html[data-theme="graphite"] body :is(th, .strategyManageTable th) { color: var(--ui-muted); background: var(--ui-soft); border-color: var(--ui-line); }
html[data-theme="graphite"] body :is(td, .strategyManageTable td) { color: var(--ui-ink); background: var(--ui-paper); border-color: var(--ui-line); }
html[data-theme="graphite"] body :is(tbody tr:hover td, .strategyManageTable tbody tr:hover td) { background: var(--ui-raised); }

/* Authentication: same form hierarchy, including legal links and inline errors. */
html[data-theme="graphite"] body.authViewActive :is(.loginPage, .loginCard, .loginAccountBox) { color: var(--ui-ink); background: var(--ui-paper); }
html[data-theme="graphite"] body.authViewActive button.loginLogoRow { color: var(--ui-ink); background: none; }
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard .loginForm :is(input, select, textarea) {
  color: var(--ui-ink); background: var(--ui-soft); border-color: var(--ui-control-line);
}
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard .loginForm input::placeholder { color: var(--ui-muted); }
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard .loginForm label { color: var(--ui-muted); }
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard :is(.plainSwitch, .loginCardTop button) {
  color: var(--ui-ink); background: var(--ui-paper); border-color: var(--ui-control-line); box-shadow: none;
}
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard .plainSwitch:hover { color: var(--ui-ink); background: var(--ui-raised); }
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard :is(.authConsent button, .forgotLine button, .loginLegalLinks button) {
  color: var(--ui-accent); background: none; border-color: var(--ui-line); box-shadow: none;
}
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard :is(.authConsent, .authConsentCopy, .loginCardTop span) { color: var(--ui-muted); }
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard :is(.authConsentList, .loginLegalLinks) { border-color: var(--ui-line); }
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard [aria-invalid="true"] { border-color: var(--ui-danger); }
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard .authFieldError { color: var(--ui-danger); }
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard .authFormMessage {
  color: var(--ui-danger); background: var(--ui-danger-soft); border-color: var(--ui-danger);
}
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard .authFormMessage.pending {
  color: var(--ui-muted); background: var(--ui-soft); border-color: var(--ui-accent);
}
html[data-theme="graphite"] body.authViewActive .authWorkbenchCard .loginForm > button[type="submit"]:disabled {
  color: var(--ui-accent-ink); background: var(--ui-accent); border-color: var(--ui-accent);
}

/* Public homepage and information/legal pages: no white islands or old blue floods. */
html[data-theme="graphite"] body :is(.corpHero, .corpFinal, .corpInfrastructure, .corpMomentum,
  .corpCompatibility, .publicPortalHero, .publicValueBand, .publicProcess,
  .corpStartGrid, .corpMarketplaceGrid, .publicStoryGrid) {
  color: var(--ui-ink); background: var(--ui-canvas); border-color: var(--ui-line);
}
html[data-theme="graphite"] body :is(.corpHeroMetrics, .corpMarketTicker, .corpMarketTickerHead,
  .corpSignalCard, .corpPulseItem, .corpAssuranceGrid article,
  .corpCapabilityGrid article, .corpFaq details, .corpMarketplace,
  .corpMarketplace article, .corpMarketplace article.publisher,
  .publicServiceGrid, .publicHelpGrid, .publicFaqList details, .publicLegalDocument,
  .publicDocumentNav, .publicInsightFeatured, .publicInsightGrid,
  .publicStoryGrid .publicStoryLead, .publicServiceGrid article,
  .publicHelpGrid article, .publicInsightGrid article) {
  color: var(--ui-ink); background: var(--ui-paper); border-color: var(--ui-line); box-shadow: none;
}
html[data-theme="graphite"] body :is(.corpHero h1, .corpHero h2, .corpHeroMetrics b,
  .corpMarketplace h3, .corpMarketplaceHeading h2, .corpFinal h2,
  .corpInfrastructureCopy h2, .corpInfrastructureFlow b,
  .corpMarketTickerHead b, .corpMarketItem > b, .corpSignalCard strong,
  .corpSignalCard b, .corpPulseItem b, .publicPortalHero h1) { color: var(--ui-ink); }
html[data-theme="graphite"] body :is(.corpHeroCopy > p, .corpHeroAssurance span, .corpHeroMetrics span,
  .corpHeroMetrics em, .corpMarketTickerHead span, .corpMarketplace p,
  .corpMarketplaceHeading p, .corpInfrastructureCopy p,
  .corpAssuranceGrid p, .corpCapabilityGrid p, .corpFaq p,
  .corpSignalCard small, .corpSignalCard p, .corpPulseItem small,
  .publicPortalHero p, .publicLegalDocument p, .publicLegalDocument li,
  .publicServiceGrid p, .publicHelpGrid p, .publicInsightGrid p) { color: var(--ui-muted); }
html[data-theme="graphite"] body :is(.corpEyebrow, .corpMarketplaceHeading span, .corpMarketplace article > span,
  .corpMarketplaceIcon, .corpHeroAssurance svg, .heroStatIcon) { color: var(--ui-accent); }
html[data-theme="graphite"] body :is(.corpHeroSecondary, .corpLoginButton, .corpMarketplace button,
  .corpSignalFooter button, .corpMomentumHeading > button) {
  color: var(--ui-accent); background: var(--ui-soft); border-color: var(--ui-control-line); box-shadow: none;
}
html[data-theme="graphite"] body :is(.corpHeroSecondary, .corpLoginButton, .corpMarketplace button,
  .corpSignalFooter button):hover { color: var(--ui-ink); background: var(--ui-raised); border-color: var(--ui-focus); }
html[data-theme="graphite"] body :is(.corpHeroMetrics > div, .corpInfrastructureFlow article,
  .corpStartGrid article, .corpSignalMetrics > span) { border-color: var(--ui-line); }
html[data-theme="graphite"] body .corpCompatibility :is(span, b) { color: var(--ui-muted); border-color: var(--ui-line); }
html[data-theme="graphite"] body :is(.corpSectionHeading > div:first-child > span,
  .corpInfrastructureCopy > span, .corpFinal > div:first-child > span,
  .corpCapabilityGrid article > b, .corpCapabilityGrid article > span) { color: var(--ui-accent); }
html[data-theme="graphite"] body :is(.corpSectionHeading > p, .corpSectionAction p,
  .corpRiskNotice p, .corpRiskNotice b) { color: var(--ui-muted); }
html[data-theme="graphite"] body .corpMomentumHeading { border-color: var(--ui-line); }
html[data-theme="graphite"] body .corpMomentumHeading > b { color: var(--ui-ink); }
html[data-theme="graphite"] body .corpMomentumHeading span { color: var(--ui-success); }
html[data-theme="graphite"] body .corpMomentumHeading i { background: var(--ui-success); box-shadow: 0 0 0 6px var(--ui-success-soft); }

/* Dialogs and notices are elevated, not brightly lit. */
html[data-theme="graphite"] body :is(dialog, .subscriptionDialog, .clientAccountCreateDialog,
  .eaProductDialog, .adminEaVersionsDialog, .confirmDialog, .appToast) {
  color: var(--ui-ink); background: var(--ui-raised); border-color: var(--ui-control-line); box-shadow: 0 8px 24px var(--ui-shadow);
}
html[data-theme="graphite"] body dialog::backdrop { background: var(--ui-overlay); }
html[data-theme="graphite"] body :is(.subscriptionDialogBackdrop, .dialogBackdrop, .modalBackdrop,
  .subscriptionOverlay, .clientAccountCreateModal) { background: var(--ui-overlay); }
html[data-theme="graphite"] body :is(.subscriptionDialogHead span, .subscriptionRiskLead b,
  .subscriptionSignalSummary b) { color: var(--ui-ink); }
html[data-theme="graphite"] body :is(.subscriptionDialogHead > div > span, .subscriptionRiskLead span,
  .subscriptionSignalSummary small, .subscriptionRiskGrid label, .subscriptionPaymentMethods small,
  .subscriptionMetricGrid em, .copyRiskSummary em, .copyExceptionSummary em,
  .dialogField, .dialogField > span) { color: var(--ui-muted); }
html[data-theme="graphite"] body:not(.landingActive) :is(.checkLine, .compactCheck):has(input:checked) {
  color: var(--ui-ink); background: var(--ui-soft); border-color: var(--ui-focus);
}
html[data-theme="graphite"] body:not(.landingActive) .subscriptionDialog > .dialogRiskCheck {
  color: var(--ui-warning); background: var(--ui-warning-soft); border-color: var(--ui-warning);
}
html[data-theme="graphite"] body .subscriptionSignalSummary strong { color: var(--ui-accent); }
html[data-theme="graphite"] body .subscriptionPaymentMethods button.active {
  color: var(--ui-ink); background: var(--ui-raised); border-color: var(--ui-focus); box-shadow: none;
}
html[data-theme="graphite"] body :is(.subscriptionDialogSteps span, .accountArchiveTabs span) {
  color: var(--ui-accent); background: var(--ui-soft); border-color: var(--ui-line);
}
html[data-theme="graphite"] body :is(.actionDisclosure > summary:hover, .actionDisclosure[open] > summary) {
  color: var(--ui-ink); background: var(--ui-soft); border-color: var(--ui-line);
}
html[data-theme="graphite"] body :is(.actionDisclosure > summary, .subscriptionRiskAdvanced > summary,
  .adminEaAddVersion > summary, .simpleOptions > summary) { color: var(--ui-ink); }
html[data-theme="graphite"] body .actionDisclosure > summary::after {
  color: var(--ui-muted); background: var(--ui-soft); border-color: var(--ui-control-line);
}
html[data-theme="graphite"] body .eaPublisherPanel.actionDisclosure > summary > b { color: var(--ui-muted); }
html[data-theme="graphite"] body :is(.moduleLoadStatus, .moduleLoadError, .eaLoginNotice,
  .eaDetailRisk, .eaRiskNote, .cashFlowNotice, .subscriptionDialogMessage,
  .strategyAvatarRequirement, .smtpStatus, .verifyNotice) {
  color: var(--ui-muted); background: var(--ui-soft); border-color: var(--ui-control-line);
}

/* Dense account, wallet and profile labels need their own legacy overrides. */
html[data-theme="graphite"] body :is(.summary, .tableMeta, .clientSetupForm label,
  .profileForm label, .roleCard span, .roleCard small, .walletBalanceText span,
  .walletBalanceText small, #profileEditor label, .walletCustomAmount > span,
  .walletCheckoutSummary > div > span, .businessForm label, .profileWalletCard > div > span,
  .profileWalletStats > span, .profilePreview > p, .profilePreview > small,
  .pager > span) { color: var(--ui-muted); }
html[data-theme="graphite"] body:not(.landingActive) .simpleOptionGrid > .compactCheck {
  color: var(--ui-ink); background: var(--ui-soft); border-color: var(--ui-control-line);
}
html[data-theme="graphite"] body :is(.clientLiveMoney, #walletRechargeTotal) { color: var(--ui-ink); }
html[data-theme="graphite"] body :is(.clientAccountCurrency, .quickActions .badge) {
  color: var(--ui-accent); background: var(--ui-soft); border-color: var(--ui-line);
}
html[data-theme="graphite"] body :is(.eaProductTitle > div > span, .eaProductFacts em,
  .eaProductFacts small, .copyLiveMeta, .myCopyEyebrow, .myCopyCompactFacts em,
  .myCopyMetaGrid em) { color: var(--ui-muted); }
html[data-theme="graphite"] body :is(.myCopyCompactFacts b, .myCopyMetaGrid b) { color: var(--ui-ink); }
html[data-theme="graphite"] body:not(.landingActive) .myCopyCardHead {
  color: var(--ui-ink); background: var(--ui-paper); border-color: var(--ui-line);
}
html[data-theme="graphite"] body:not(.landingActive) .myCopyCardHead:is(:hover, :focus-visible) {
  color: var(--ui-ink); background: var(--ui-soft); outline-color: var(--ui-focus);
}
html[data-theme="graphite"] body .eaProductTitle > strong { color: var(--ui-ink); }
html[data-theme="graphite"] body #quickActions > a {
  color: var(--ui-ink); background: var(--ui-soft); border-color: var(--ui-control-line); box-shadow: none;
}
html[data-theme="graphite"] body #quickActions > a[aria-disabled="true"] {
  color: var(--ui-muted); background: var(--ui-soft); border-color: var(--ui-line);
}
html[data-theme="graphite"] body .walletRechargeTitle > span {
  color: var(--ui-muted); background: var(--ui-soft); border-color: var(--ui-line);
}
/* The legacy payment CTA used !important, so these narrowly scoped colors must match. */
html[data-theme="graphite"] body .walletPayButton {
  color: var(--ui-accent-ink) !important;
  background: var(--ui-accent) !important;
  box-shadow: none !important;
}
html[data-theme="graphite"] body .walletPayButton:hover:not(:disabled) { background: var(--ui-accent-hover) !important; }
html[data-theme="graphite"] body .walletPayButton:disabled {
  color: var(--ui-muted) !important;
  background: var(--ui-soft) !important;
}

/* Semantic statuses last: never paint unknown data as positive or losses as neutral. */
html[data-theme="graphite"] body :is(.profit, .gain, .win, .positive, .up, .ok, .eaRatingStars),
html[data-theme="graphite"] body :is(.metric, .rankingMetric, .copyMetric) :is(b.gain, b.win, b.profit),
html[data-theme="graphite"] body .corpMarketItem.up strong { color: var(--ui-success); }
html[data-theme="graphite"] body :is(.loss, .negative, .down, .bad, .danger),
html[data-theme="graphite"] body :is(.metric, .rankingMetric, .copyMetric) b.loss,
html[data-theme="graphite"] body .corpMarketItem.down strong { color: var(--ui-danger); }
html[data-theme="graphite"] body :is(.warn, .warning) { color: var(--ui-warning); }
html[data-theme="graphite"] body :is(.metric, .rankingMetric, .copyMetric) b.unavailable { color: var(--ui-muted); }
html[data-theme="graphite"] body :is(.statusPill.bad, .healthBadge.bad, .copyBadge.bad, .rankingTag.bad,
  .roleBadge.bad, .authMessage.bad, .clientLoginResult.bad, .appToast.bad,
  .smtpStatus.bad, .cashFlowNotice.danger, .copyRealtimeAlerts article.bad,
  .copyGroupCard.bad, .copyHero.bad, .copyManagerAccountBlock.bad, .subscriptionDialogMessage.bad) {
  color: var(--ui-danger); background: var(--ui-danger-soft); border-color: var(--ui-danger);
}
html[data-theme="graphite"] body :is(.statusPill.warn, .healthBadge.warn, .copyBadge.warn, .rankingTag.warn,
  .roleBadge.warn, .subscriptionDialogMessage.warn, .copyManagerLog.warn,
  .copyManagerGroupButton.warn, .copyTimelineItem.warn, .copyGroupCard.warn,
  .copyHero.warn, .strategyAvatarRequirement.pending) {
  color: var(--ui-warning); background: var(--ui-warning-soft); border-color: var(--ui-warning);
}
html[data-theme="graphite"] body :is(.authMessage.ok, .clientLoginResult.ok, .strategyAvatarRequirement.ready,
  .statusPill.ok, .healthBadge.ok, .copyBadge.ok) {
  color: var(--ui-success); background: var(--ui-success-soft); border-color: var(--ui-success);
}
html[data-theme="graphite"] body :is(.riskBar i.bad, .riskBar i.danger) { background: var(--ui-danger); }
html[data-theme="graphite"] body .riskBar i.warn { background: var(--ui-warning); }
html[data-theme="graphite"] body :is(.riskBar i.ok, .riskBar i.success) { background: var(--ui-success); }

@media (max-width: 760px) {
  html[data-theme="graphite"] body.authViewActive .loginBrandPanel { color: var(--ui-ink); background: var(--ui-paper); }
  html[data-theme="graphite"] body.authViewActive :is(button.loginLogoRow, .loginLogoRow b) { color: var(--ui-ink); }
  html[data-theme="graphite"] body.authViewActive .loginLogoRow small { color: var(--ui-muted); }
}