/* 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;
}