/* Deepen common frameworks / utility classes to CU tokens.
   Loaded sitewide so apps start looking same-handed without a full rewrite. */

html[data-cu-theme] {
  --primary: var(--cu-accent);
  --primary-color: var(--cu-accent);
  --color-primary: var(--cu-accent);
  --brand: var(--cu-accent);
  --brand-color: var(--cu-accent);
  --accent: var(--cu-accent);
  --accent-color: var(--cu-accent);
  --bg: var(--cu-bg);
  --background: var(--cu-bg);
  --foreground: var(--cu-ink);
  --card: var(--cu-surface-solid);
  --muted: var(--cu-muted);
  --border: var(--cu-line);
  --ring: var(--cu-accent-soft);
  --radius: var(--cu-radius-sm);

  /* Bootstrap / admin templates */
  --bs-primary: var(--cu-accent);
  --bs-body-bg: var(--cu-bg);
  --bs-body-color: var(--cu-text);
  --bs-border-color: var(--cu-line);
  --bs-link-color: var(--cu-accent);

  /* Ant Design */
  --ant-color-primary: var(--cu-accent);
  --ant-primary-color: var(--cu-accent);
  --antd-wave-shadow-color: var(--cu-accent);

  /* Element Plus */
  --el-color-primary: var(--cu-accent);
  --el-bg-color: var(--cu-bg);
  --el-bg-color-page: var(--cu-bg);
  --el-text-color-primary: var(--cu-ink);
  --el-border-color: var(--cu-line);

  /* Naive / Arco-ish */
  --n-color: var(--cu-surface-solid);
  --color-bg-1: var(--cu-bg);
  --color-bg-2: var(--cu-bg-elevated);
  --color-text-1: var(--cu-ink);

  /* shadcn / radix-ish */
  --background: var(--cu-bg);
  --foreground: var(--cu-ink);
  --primary-foreground: var(--cu-btn-fg);
  --secondary: var(--cu-bg-soft);
  --muted-foreground: var(--cu-muted);
}

html[data-cu-theme] body {
  font-family: var(--cu-font-sans);
}

html[data-cu-theme] body:not([data-cu-keep-bg]):not(.ol-viewport):not(.mapboxgl-map) {
  background-color: var(--cu-bg);
  color: var(--cu-text);
}

/* Common primary buttons across stacks */
html[data-cu-theme] .ant-btn-primary,
html[data-cu-theme] .el-button--primary,
html[data-cu-theme] .btn-primary,
html[data-cu-theme] .btn-success,
html[data-cu-theme] .bg-primary,
html[data-cu-theme] button.primary,
html[data-cu-theme] .MuiButton-containedPrimary,
html[data-cu-theme] .n-button--primary-type,
html[data-cu-theme] .arco-btn-primary {
  background: linear-gradient(135deg, var(--cu-accent-2), var(--cu-accent)) !important;
  border-color: transparent !important;
  color: var(--cu-btn-fg) !important;
  box-shadow: 0 10px 24px -12px var(--cu-accent-glow) !important;
}

html[data-cu-theme] .ant-layout,
html[data-cu-theme] .el-container,
html[data-cu-theme] .n-layout,
html[data-cu-theme] .n-config-provider,
html[data-cu-theme] .arco-layout {
  background: var(--cu-bg) !important;
  color: var(--cu-text);
}

html[data-cu-theme] .ant-layout-header,
html[data-cu-theme] .el-header,
html[data-cu-theme] .n-layout-header,
html[data-cu-theme] .navbar,
html[data-cu-theme] .top-nav,
html[data-cu-theme] .app-header,
html[data-cu-theme] .arco-layout-header,
html[data-cu-theme] header.header,
html[data-cu-theme] .site-header {
  background: var(--cu-topbar-bg) !important;
  border-bottom: 1px solid var(--cu-line) !important;
  color: var(--cu-ink) !important;
}

html[data-cu-theme] .ant-card,
html[data-cu-theme] .el-card,
html[data-cu-theme] .n-card,
html[data-cu-theme] .card,
html[data-cu-theme] .panel,
html[data-cu-theme] .arco-card,
html[data-cu-theme] .MuiPaper-root {
  background: var(--cu-surface) !important;
  border-color: var(--cu-line) !important;
  color: var(--cu-text);
  border-radius: var(--cu-radius) !important;
}

html[data-cu-theme] a.link-primary,
html[data-cu-theme] .text-primary,
html[data-cu-theme] .ant-typography a,
html[data-cu-theme] .arco-link {
  color: var(--cu-accent) !important;
}

/* Soft-remap common Tailwind / utility accent chips → theme accent */
html[data-cu-theme] .bg-emerald-500,
html[data-cu-theme] .bg-emerald-600,
html[data-cu-theme] .bg-green-500,
html[data-cu-theme] .bg-green-600,
html[data-cu-theme] .bg-teal-500,
html[data-cu-theme] .bg-teal-600,
html[data-cu-theme] .bg-cyan-500,
html[data-cu-theme] .bg-cyan-400,
html[data-cu-theme] .bg-amber-500,
html[data-cu-theme] .bg-yellow-500,
html[data-cu-theme] .bg-indigo-500,
html[data-cu-theme] .bg-violet-500,
html[data-cu-theme] .bg-purple-500,
html[data-cu-theme] .bg-sky-500,
html[data-cu-theme] .bg-blue-500,
html[data-cu-theme] .bg-orange-500 {
  background-color: var(--cu-accent) !important;
  color: var(--cu-btn-fg) !important;
}

html[data-cu-theme] .text-emerald-500,
html[data-cu-theme] .text-emerald-600,
html[data-cu-theme] .text-green-600,
html[data-cu-theme] .text-teal-500,
html[data-cu-theme] .text-cyan-400,
html[data-cu-theme] .text-amber-500,
html[data-cu-theme] .text-indigo-500,
html[data-cu-theme] .text-violet-500,
html[data-cu-theme] .text-sky-500,
html[data-cu-theme] .text-blue-500 {
  color: var(--cu-accent) !important;
}

html[data-cu-theme] .border-emerald-500,
html[data-cu-theme] .border-green-500,
html[data-cu-theme] .border-teal-500,
html[data-cu-theme] .border-amber-500,
html[data-cu-theme] .border-indigo-500 {
  border-color: var(--cu-accent) !important;
}

/* Inputs / focus rings */
html[data-cu-theme] input:focus,
html[data-cu-theme] textarea:focus,
html[data-cu-theme] select:focus,
html[data-cu-theme] .ant-input:focus,
html[data-cu-theme] .el-input__inner:focus {
  border-color: var(--cu-accent) !important;
  box-shadow: 0 0 0 3px var(--cu-accent-soft) !important;
  outline: none;
}

/* Sidebar / menu active */
html[data-cu-theme] .ant-menu-item-selected,
html[data-cu-theme] .el-menu-item.is-active,
html[data-cu-theme] .n-menu-item-content--selected,
html[data-cu-theme] .arco-menu-selected {
  color: var(--cu-accent) !important;
  background: var(--cu-accent-soft) !important;
}

/* Portal deepen */
html[data-cu-theme] .portal-shell {
  background: transparent !important;
  color: var(--cu-text) !important;
}

html[data-cu-theme] .portal-shell .topbar {
  background: var(--cu-topbar-bg) !important;
  border-bottom-color: var(--cu-line) !important;
  box-shadow: none !important;
}

html[data-cu-theme] .portal-shell .search-box {
  background: var(--cu-input-bg) !important;
  border-color: var(--cu-line) !important;
}

html[data-cu-theme] .portal-shell .environment {
  border-color: var(--cu-line) !important;
  background: var(--cu-accent-soft) !important;
  color: var(--cu-accent) !important;
}

html[data-cu-theme] .portal-shell .filters button.active {
  background: var(--cu-accent) !important;
  color: var(--cu-btn-fg) !important;
}

html[data-cu-theme] .portal-shell .app-card:hover {
  border-color: var(--cu-accent) !important;
}

html[data-cu-theme] .portal-shell .type-badge {
  color: var(--cu-accent) !important;
}

html[data-cu-theme] .portal-shell .type-badge__dot {
  background: var(--cu-accent) !important;
  box-shadow: 0 0 0 4px var(--cu-accent-soft) !important;
}

html[data-cu-theme] .portal-shell .state--online {
  background: var(--cu-accent-soft) !important;
  color: var(--cu-accent) !important;
}

html[data-cu-theme] .portal-shell .constellation {
  opacity: 0.16;
  filter: sepia(0.35) saturate(1.4);
}

html[data-cu-theme="stellar"] .portal-shell .constellation,
html[data-cu-theme="parchment"] .portal-shell .constellation,
html[data-cu-theme="ocean"] .portal-shell .constellation,
html[data-cu-theme="violet"] .portal-shell .constellation {
  opacity: 0.28;
  filter: none;
}

/* Theme-aware logo: dark themes use dark SVG (transparent bg), light themes use light SVG via filter fallback */
html[data-cu-theme="healing"] .portal-shell .brand > img,
html[data-cu-theme="paper"] .portal-shell .brand > img,
html[data-cu-theme="calendar"] .portal-shell .brand > img {
  filter: none;
}

/* —— Deeper framework / utility remaps (palette deepen round) —— */

/* Ant Design extras */
html[data-cu-theme] .ant-btn-link,
html[data-cu-theme] .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
html[data-cu-theme] .ant-pagination-item-active,
html[data-cu-theme] .ant-switch-checked,
html[data-cu-theme] .ant-checkbox-checked .ant-checkbox-inner,
html[data-cu-theme] .ant-radio-checked .ant-radio-inner,
html[data-cu-theme] .ant-slider-track,
html[data-cu-theme] .ant-progress-bg,
html[data-cu-theme] .ant-tag-blue,
html[data-cu-theme] .ant-tag-processing {
  color: var(--cu-accent) !important;
  border-color: var(--cu-accent) !important;
}
html[data-cu-theme] .ant-switch-checked,
html[data-cu-theme] .ant-checkbox-checked .ant-checkbox-inner,
html[data-cu-theme] .ant-pagination-item-active a,
html[data-cu-theme] .ant-slider-handle::after {
  background: var(--cu-accent) !important;
  background-color: var(--cu-accent) !important;
}
html[data-cu-theme] .ant-menu-light .ant-menu-item-selected,
html[data-cu-theme] .ant-menu-inline .ant-menu-item-selected {
  background: var(--cu-accent-soft) !important;
  color: var(--cu-accent) !important;
}

/* Element Plus extras */
html[data-cu-theme] .el-button--primary.is-link,
html[data-cu-theme] .el-tabs__item.is-active,
html[data-cu-theme] .el-pager li.is-active,
html[data-cu-theme] .el-switch.is-checked .el-switch__core,
html[data-cu-theme] .el-checkbox__input.is-checked .el-checkbox__inner,
html[data-cu-theme] .el-radio__input.is-checked .el-radio__inner,
html[data-cu-theme] .el-slider__bar,
html[data-cu-theme] .el-progress-bar__inner,
html[data-cu-theme] .el-tag--primary {
  background-color: var(--cu-accent) !important;
  border-color: var(--cu-accent) !important;
  color: var(--cu-btn-fg) !important;
}
html[data-cu-theme] .el-tabs__active-bar,
html[data-cu-theme] .el-menu-item.is-active {
  background-color: var(--cu-accent-soft) !important;
  color: var(--cu-accent) !important;
}

/* Bootstrap extras */
html[data-cu-theme] .btn-outline-primary,
html[data-cu-theme] .nav-pills .nav-link.active,
html[data-cu-theme] .page-item.active .page-link,
html[data-cu-theme] .form-check-input:checked,
html[data-cu-theme] .progress-bar,
html[data-cu-theme] .badge.bg-primary {
  background-color: var(--cu-accent) !important;
  border-color: var(--cu-accent) !important;
  color: var(--cu-btn-fg) !important;
}
html[data-cu-theme] .text-bg-primary {
  background-color: var(--cu-accent) !important;
  color: var(--cu-btn-fg) !important;
}

/* Tailwind / shadcn more accents */
html[data-cu-theme] .bg-blue-600,
html[data-cu-theme] .bg-indigo-600,
html[data-cu-theme] .bg-violet-600,
html[data-cu-theme] .bg-purple-600,
html[data-cu-theme] .bg-cyan-600,
html[data-cu-theme] .bg-emerald-700,
html[data-cu-theme] .bg-orange-600,
html[data-cu-theme] .bg-amber-600,
html[data-cu-theme] .from-blue-500,
html[data-cu-theme] .from-indigo-500,
html[data-cu-theme] .from-emerald-500 {
  background-color: var(--cu-accent) !important;
  --tw-gradient-from: var(--cu-accent) !important;
}
html[data-cu-theme] .ring-blue-500,
html[data-cu-theme] .ring-indigo-500,
html[data-cu-theme] .focus\:ring-blue-500:focus,
html[data-cu-theme] .focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--cu-accent) !important;
}

/* Common hard-coded Ant / Element primary blues → theme accent (inline style survivors still need per-app CSS) */
html[data-cu-theme] [style*="#1677ff"],
html[data-cu-theme] [style*="#1890ff"],
html[data-cu-theme] [style*="#409eff"] {
  /* attribute presence only — real remap needs app CSS; keep soft marker class */
}

/* Tables / lists */
html[data-cu-theme] .ant-table-thead > tr > th,
html[data-cu-theme] .el-table th.el-table__cell,
html[data-cu-theme] table thead th {
  background: var(--cu-bg-soft) !important;
  color: var(--cu-ink) !important;
  border-color: var(--cu-line) !important;
}
html[data-cu-theme] .ant-table-tbody > tr > td,
html[data-cu-theme] .el-table td.el-table__cell,
html[data-cu-theme] table td {
  border-color: var(--cu-line) !important;
  color: var(--cu-text);
}

/* Drawers / modals */
html[data-cu-theme] .ant-modal-content,
html[data-cu-theme] .ant-drawer-content,
html[data-cu-theme] .el-dialog,
html[data-cu-theme] .el-drawer,
html[data-cu-theme] .n-modal,
html[data-cu-theme] .arco-modal-content,
html[data-cu-theme] .modal-content {
  background: var(--cu-surface-solid) !important;
  color: var(--cu-text) !important;
  border-color: var(--cu-line) !important;
}