/* Shared semantic icon colors. Loaded after feature and theme styles.
   Decorative UI SVGs, badges and text arrows share this palette; diagrams keep their own colors. */

/* Violet */
:is(.ui-icon, .cheat-mono):is([data-icon="home"], [data-icon="book"], [data-icon="network"], [data-icon="cpu"], [data-icon="compass"], [data-icon="target"], [data-icon="panel-left"], [data-icon="panel-right"], [data-icon="rotate-ccw"], [data-icon="menu"]),
:is(.card-icon, .side-icon):has(> .ui-icon:is([data-icon="home"], [data-icon="book"], [data-icon="network"], [data-icon="cpu"], [data-icon="compass"], [data-icon="target"], [data-icon="panel-left"], [data-icon="panel-right"], [data-icon="rotate-ccw"], [data-icon="menu"])) {
  --icon-bright: #c4b5fd;
  --icon-ink: #6d28d9;
}

/* Cyan */
:is(.ui-icon, .cheat-mono):is([data-icon="code"], [data-icon="globe"], [data-icon="layout"], [data-icon="search"]),
:is(.card-icon, .side-icon):has(> .ui-icon:is([data-icon="code"], [data-icon="globe"], [data-icon="layout"], [data-icon="search"])) {
  --icon-bright: #67e8f9;
  --icon-ink: #155e75;
}

/* Green */
:is(.ui-icon, .cheat-mono):is([data-icon="cloud"], [data-icon="shield"], [data-icon="check"], [data-icon="check-circle"], [data-icon="terminal"], [data-icon="git-branch"]),
:is(.card-icon, .side-icon):has(> .ui-icon:is([data-icon="cloud"], [data-icon="shield"], [data-icon="check"], [data-icon="check-circle"], [data-icon="terminal"], [data-icon="git-branch"])) {
  --icon-bright: #86efac;
  --icon-ink: #166534;
}

/* Amber */
:is(.ui-icon, .cheat-mono):is([data-icon="tool"], [data-icon="settings"], [data-icon="key"], [data-icon="bolt"], [data-icon="zap"], [data-icon="star"]),
:is(.card-icon, .side-icon):has(> .ui-icon:is([data-icon="tool"], [data-icon="settings"], [data-icon="key"], [data-icon="bolt"], [data-icon="zap"], [data-icon="star"])) {
  --icon-bright: #fbbf24;
  --icon-ink: #92400e;
}

/* Pink */
:is(.ui-icon, .cheat-mono):is([data-icon="brain"], [data-icon="robot"], [data-icon="sparkles"], [data-icon="users"]),
:is(.card-icon, .side-icon):has(> .ui-icon:is([data-icon="brain"], [data-icon="robot"], [data-icon="sparkles"], [data-icon="users"])) {
  --icon-bright: #f9a8d4;
  --icon-ink: #be185d;
}

/* Orange */
:is(.ui-icon, .cheat-mono):is([data-icon="package"], [data-icon="layers"], [data-icon="database"], [data-icon="server"]),
:is(.card-icon, .side-icon):has(> .ui-icon:is([data-icon="package"], [data-icon="layers"], [data-icon="database"], [data-icon="server"])) {
  --icon-bright: #fdba74;
  --icon-ink: #9a3412;
}

/* Blue */
:is(.ui-icon, .cheat-mono):is([data-icon="activity"], [data-icon="smartphone"], [data-icon="arrow-up-right"]),
:is(.card-icon, .side-icon):has(> .ui-icon:is([data-icon="activity"], [data-icon="smartphone"], [data-icon="arrow-up-right"])) {
  --icon-bright: #93c5fd;
  --icon-ink: #1d4ed8;
}

/* Red */
:is(.ui-icon, .cheat-mono):is([data-icon="x"]),
:is(.card-icon, .side-icon):has(> .ui-icon:is([data-icon="x"])) {
  --icon-bright: #fca5a5;
  --icon-ink: #b91c1c;
}

:root[data-theme] :is(.ui-icon, .card-icon, .side-icon, .cheat-mono, .external-icon, .arrow, .back-to-top, .side-toggle) {
  --icon-color: var(--icon-bright, #c4b5fd);
  color: var(--icon-color);
}
:root[data-theme='vercel-light'] :is(.ui-icon, .card-icon, .side-icon, .cheat-mono, .external-icon, .arrow, .back-to-top, .side-toggle) {
  --icon-color: var(--icon-ink, #6d28d9);
}
:root[data-theme] :is(.card-icon, .side-icon):has(> .ui-icon),
:root[data-theme] .cheat-mono {
  border-color: color-mix(in srgb, var(--icon-color) 48%, var(--panel));
  background: color-mix(in srgb, var(--icon-color) 12%, var(--panel));
}
/* Filled primary actions use the opposite surface to the page. */
:root[data-theme] .primary-button .ui-icon { color: var(--icon-ink, #6d28d9); }
:root[data-theme='vercel-light'] .primary-button .ui-icon { color: var(--icon-bright, #c4b5fd); }
@media (forced-colors: active) {
  :root[data-theme] .ui-icon { color: CanvasText; }
  :root[data-theme] .primary-button .ui-icon { color: ButtonText; }
}

/* Legacy text arrows share the same blue as SVG external-link arrows. */
:root[data-theme] :is(.external-icon, .arrow, .back-to-top) {
  --icon-bright: #93c5fd;
  --icon-ink: #1d4ed8;
}

:root[data-theme] .page-actions .back-to-top { color: var(--icon-color); }
:root[data-theme] .side-toggle span { color: inherit; }

.search-trigger .ui-icon { width: 18px; height: 18px; }

:root[data-theme] body .card-bottom .arrow { color: var(--icon-color); }

:root[data-theme] .diagram .diagram-actions button[data-action] { color: #93c5fd; }
:root[data-theme='vercel-light'] .diagram .diagram-actions button[data-action] { color: #1d4ed8; }