/**
 * @module theme/global-accent-sync
 * @charter UID@2.0.0 · COD@1.0.0
 * @layer 4
 */

html[data-accent="emerald"] {
  --accent-h: 158;
  --accent-s: 76%;
  --accent-soft-s: 54%;
  --accent-rgb: 35 226 160;
  --accent-foreground: #f4fff9;
  --accent-ink: #071f16;
}

:root {
  --ui-accent: rgb(var(--accent-rgb));
  --ui-accent-border: rgb(var(--accent-rgb) / 0.48);
  --ui-accent-glow: rgb(var(--accent-rgb) / 0.38);
  --ui-accent-glow-soft: rgb(var(--accent-rgb) / 0.14);
  --ui-accent-surface: color-mix(in srgb, rgb(var(--accent-rgb)) 18%, #152338);
  --ui-accent-surface-deep: color-mix(in srgb, var(--accent-900) 72%, #07111e);

  --status-success: #10b8a6;
  --status-warning: #e8913a;
  --status-danger: #dc606e;
  --status-risk: #7157d9;
  --status-p1: #13c6e8;
  --status-planned: #6fa0d6;

  --cc-primary: var(--accent-600);
  --cc-cyan: var(--accent-400);
  --cc-teal: var(--accent-500);
  --cc-glow: var(--ui-accent-glow);
  --cc-glow-soft: var(--ui-accent-glow-soft);
  --cc-glow-ring: rgb(var(--accent-rgb) / 0.28);
}

html[data-theme-resolved="light"],
html[data-theme-resolved="dark"],
html:not([data-theme-resolved="light"]) {
  --cc-primary: var(--accent-600);
  --cc-cyan: var(--accent-400);
  --cc-teal: var(--accent-500);
  --cc-glow: var(--ui-accent-glow);
  --cc-glow-soft: var(--ui-accent-glow-soft);
  --cc-glow-ring: rgb(var(--accent-rgb) / 0.28);
}

html[data-theme-resolved="light"],
html[data-theme-resolved="light"] body {
  background:
    radial-gradient(ellipse 70% 45% at 55% -10%, rgb(var(--accent-rgb) / 0.08), transparent 55%),
    linear-gradient(180deg, #eef3f9 0%, var(--cc-bg) 38%, #e9f0f7 100%);
}

html[data-theme-resolved="dark"] body,
html:not([data-theme-resolved="light"]) body {
  background:
    radial-gradient(ellipse 60% 40% at 50% -15%, rgb(var(--accent-rgb) / 0.16), transparent 50%),
    linear-gradient(180deg, #040b16 0%, #06111f 45%, #050a14 100%);
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card.cc-metric {
  --kpi-ink: #f4f8fd;
  --kpi-muted: #b5c5d6;
  --kpi-soft: #8397ac;
  color: var(--kpi-ink) !important;
  border-color: rgb(var(--accent-rgb) / 0.32) !important;
  background-color: #09131f !important;
  background-image:
    radial-gradient(ellipse 82% 72% at 92% -8%, rgb(var(--accent-rgb) / 0.2), transparent 58%),
    linear-gradient(155deg, color-mix(in srgb, rgb(var(--accent-rgb)) 12%, #182536) 0%, #0d1826 54%, #08111c 100%) !important;
  box-shadow:
    inset 0 1px rgba(224, 240, 255, 0.13),
    inset 3px 0 0 var(--kpi-rail),
    inset 0 -1px rgb(var(--accent-rgb) / 0.08),
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 20px rgb(var(--accent-rgb) / 0.08) !important;
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card[data-kpi="active"] {
  --kpi-rail: var(--status-success);
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card[data-kpi="p1"] {
  --kpi-rail: var(--status-p1);
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card[data-kpi="risk"] {
  --kpi-rail: var(--status-risk);
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card[data-kpi="decision"] {
  --kpi-rail: var(--status-warning);
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card[data-kpi="active"] .cc-metric__spark {
  color: var(--status-success);
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card[data-kpi="p1"] .cc-metric__bar > i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--status-p1) 72%, #1268b3), var(--status-p1));
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card.cc-metric::after {
  display: block !important;
  opacity: 0.68 !important;
  background:
    linear-gradient(rgb(var(--accent-rgb) / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.02) 1px, transparent 1px),
    radial-gradient(circle at 88% 10%, rgb(var(--accent-rgb) / 0.14), transparent 36%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.08), transparent 34%) !important;
  background-size: 18px 18px, 18px 18px, auto, auto !important;
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card.cc-metric:hover,
html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card.cc-metric.hovering,
html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card.cc-metric.selected {
  border-color: rgb(var(--accent-rgb) / 0.56) !important;
  box-shadow:
    inset 0 1px rgba(232, 244, 255, 0.18),
    inset 3px 0 0 var(--kpi-rail),
    0 14px 32px rgba(0, 0, 0, 0.38),
    0 0 24px rgb(var(--accent-rgb) / 0.17) !important;
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card.cc-metric:focus-visible {
  border-color: rgb(var(--accent-rgb) / 0.64) !important;
  box-shadow:
    inset 0 1px rgba(232, 244, 255, 0.18),
    inset 3px 0 0 var(--kpi-rail),
    0 0 0 2px rgb(var(--accent-rgb) / 0.7),
    0 0 0 6px rgb(var(--accent-rgb) / 0.13),
    0 14px 32px rgba(0, 0, 0, 0.38) !important;
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .cc-metric__head h3,
html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .cc-metric__value,
html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .cc-metric__value strong,
html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .metric-card .cc-metric__value strong {
  color: var(--kpi-ink) !important;
  -webkit-text-fill-color: var(--kpi-ink) !important;
}

html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .cc-metric__head span,
html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .cc-metric__foot,
html:where([data-theme-resolved="dark"], :not([data-theme-resolved="light"]))
  .cc-metric-strip .cc-metric__foot em {
  color: var(--kpi-soft) !important;
}

html[data-theme-resolved="light"] .sidebar .nav-item.active {
  color: var(--accent-ink) !important;
  border-color: var(--ui-accent-border) !important;
  background:
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.16), transparent 84%),
    rgba(255, 255, 255, 0.72) !important;
  box-shadow: inset 3px 0 0 var(--ui-accent), 0 0 16px var(--ui-accent-glow-soft) !important;
}

html:not([data-theme-resolved="light"]) .nav-item.active {
  color: var(--accent-foreground);
  border-color: var(--ui-accent-border);
  background:
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.18), transparent 84%),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 3px 0 0 var(--ui-accent), 0 0 18px var(--ui-accent-glow-soft);
}

.completion-meter b {
  box-shadow: 0 0 10px var(--ui-accent-glow);
}

.fan-view .completion-card {
  background:
    radial-gradient(ellipse 70% 45% at 80% 0%, rgb(var(--accent-rgb) / 0.38), transparent 55%),
    linear-gradient(160deg, var(--ui-accent-surface) 0%, #152338 48%, #0e1828 100%) !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.52),
    0 0 22px var(--ui-accent-glow-soft),
    inset 0 1px rgba(220, 235, 255, 0.22) !important;
}

html[data-theme-resolved="light"] .notes-filters .chip.active {
  border-color: var(--ui-accent-border);
  background: linear-gradient(145deg, rgb(var(--accent-rgb) / 0.22), rgba(240, 246, 252, 0.96));
}

html[data-theme-resolved="light"] .cc-orbit-stage {
  background:
    radial-gradient(ellipse 58% 48% at 50% 46%, rgb(var(--accent-rgb) / 0.08), transparent 70%),
    linear-gradient(180deg, #f7f9fb 0%, #edf1f5 100%) !important;
}

html[data-theme-resolved="dark"] .cc-orbit-stage,
html:not([data-theme-resolved="light"]) .cc-orbit-stage {
  background:
    radial-gradient(ellipse 58% 48% at 50% 46%, rgb(var(--accent-rgb) / 0.12), transparent 70%),
    linear-gradient(180deg, #0c1a2a 0%, #07111e 100%) !important;
}

.cc-orbit-node.is-focus {
  border-color: rgb(var(--accent-rgb) / 0.82) !important;
  background:
    radial-gradient(circle at 74% 11%, rgb(var(--accent-rgb) / 0.34), transparent 28%),
    linear-gradient(165deg, color-mix(in srgb, rgb(var(--accent-rgb)) 44%, #284c70), var(--ui-accent-surface-deep) 78%) !important;
  box-shadow:
    inset 0 0 0 4px rgb(var(--accent-rgb) / 0.12),
    inset 0 2px 5px rgba(255, 255, 255, 0.42),
    inset 0 -18px 30px rgba(1, 18, 35, 0.5),
    0 0 0 2px rgb(var(--accent-rgb) / 0.3),
    0 0 24px rgb(var(--accent-rgb) / 0.68),
    0 0 58px rgb(var(--accent-rgb) / 0.42),
    0 24px 42px rgba(5, 20, 38, 0.4) !important;
}

.cc-orbit-node.is-focus::before {
  border-color: rgb(var(--accent-rgb) / 0.58);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgb(var(--accent-rgb) / 0.14) 46%, rgba(4, 26, 48, 0.2));
  box-shadow: inset 0 0 16px rgb(var(--accent-rgb) / 0.2), 0 0 25px rgb(var(--accent-rgb) / 0.42);
}

.cc-orbit-node.is-focus .cc-orbit-node__mark {
  border-color: rgb(var(--accent-rgb) / 0.18);
  color: color-mix(in srgb, rgb(var(--accent-rgb)) 24%, #f5fbff);
  text-shadow: 0 0 17px rgb(var(--accent-rgb) / 0.38);
}

.cc-orbit-node.is-focus .cc-orbit-node__metrics > div + div {
  border-left-color: rgb(var(--accent-rgb) / 0.24);
}

.cc-orbit-node__readybar > b,
.cc-orbit-hero__bar > b {
  background: linear-gradient(90deg, var(--accent-600), var(--accent-400)) !important;
  box-shadow: 0 0 10px var(--ui-accent-glow) !important;
}

.cc-orbit-node[data-status="active"] .cc-orbit-node__status,
#orbitHeroStatusDot[data-tone="active"],
.cc-orbit-legend [data-tone="active"] {
  background: var(--status-success) !important;
}

.cc-orbit-node[data-status="decision"] .cc-orbit-node__status,
#orbitHeroStatusDot[data-tone="decision"],
.cc-orbit-legend [data-tone="decision"],
.cc-metric--pulse .cc-dot {
  background: var(--status-warning) !important;
}

.cc-orbit-node[data-status="risk"] .cc-orbit-node__status,
#orbitHeroStatusDot[data-tone="risk"],
.cc-orbit-legend [data-tone="risk"] {
  background: var(--status-risk) !important;
}

.cc-orbit-node[data-status="p1"] .cc-orbit-node__status,
#orbitHeroStatusDot[data-tone="p1"],
.cc-orbit-legend [data-tone="p1"] {
  background: var(--status-p1) !important;
}

.cc-orbit-node[data-status="planned"] .cc-orbit-node__status,
#orbitHeroStatusDot[data-tone="planned"],
.cc-orbit-legend [data-tone="planned"] {
  background: var(--status-planned) !important;
}