/* DS atom: surface-tag filter chip — hue-echo to roadmap Kanban card tags */

.ds-surface-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
  flex-shrink: 0;
  margin: 0;
  padding: var(--s-space-twohair) var(--s-space-2);
  border: 0.5px solid var(--s-color-border-subtle);
  border-radius: 999px;
  background: transparent;
  color: var(--s-color-fg-primary);
  font: inherit;
  font-size: var(--s-font-size-0);
  font-family: var(--s-font-mono, ui-monospace, monospace);
  cursor: pointer;
  transition:
    background var(--s-duration-fast, 120ms) ease,
    border-color var(--s-duration-fast, 120ms) ease,
    color var(--s-duration-fast, 120ms) ease;
}

.ds-surface-chip__count {
  color: var(--s-color-fg-muted, var(--s-color-fg-muted));
  font-variant-numeric: tabular-nums;
}

.ds-surface-chip--active .ds-surface-chip__count {
  color: inherit;
  opacity: 0.9;
}

/* Rest — low emphasis with hue hint */
.ds-surface-chip--design-system:not(.ds-surface-chip--active) {
  border-color: color-mix(in oklch, var(--surface-tag-design-system-color) 42%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--surface-tag-design-system-color) 10%, var(--s-color-bg-app));
}

.ds-surface-chip--operations:not(.ds-surface-chip--active) {
  border-color: color-mix(in oklch, var(--surface-tag-operations-color) 42%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--surface-tag-operations-color) 10%, var(--s-color-bg-app));
}

.ds-surface-chip--provenance:not(.ds-surface-chip--active) {
  border-color: color-mix(in oklch, var(--surface-tag-provenance-color) 42%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--surface-tag-provenance-color) 10%, var(--s-color-bg-app));
}

.ds-surface-chip--marketing:not(.ds-surface-chip--active) {
  border-color: color-mix(in oklch, var(--surface-tag-marketing-color) 42%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--surface-tag-marketing-color) 10%, var(--s-color-bg-app));
}

.ds-surface-chip--macro-and-structures:not(.ds-surface-chip--active) {
  border-color: color-mix(in oklch, var(--surface-tag-macro-color) 42%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--surface-tag-macro-color) 10%, var(--s-color-bg-app));
}

.ds-surface-chip--routing:not(.ds-surface-chip--active) {
  border-color: color-mix(in oklch, var(--surface-tag-routing-color) 42%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--surface-tag-routing-color) 10%, var(--s-color-bg-app));
}

.ds-surface-chip--shell:not(.ds-surface-chip--active) {
  border-color: color-mix(in oklch, var(--surface-tag-shell-color) 42%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--surface-tag-shell-color) 10%, var(--s-color-bg-app));
}

.ds-surface-chip--studio:not(.ds-surface-chip--active) {
  border-color: color-mix(in oklch, var(--surface-tag-studio-color) 42%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--surface-tag-studio-color) 10%, var(--s-color-bg-app));
}

.ds-surface-chip--projects:not(.ds-surface-chip--active) {
  border-color: color-mix(in oklch, var(--surface-tag-projects-color) 42%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--surface-tag-projects-color) 10%, var(--s-color-bg-app));
}

.ds-surface-chip--other:not(.ds-surface-chip--active) {
  border-color: color-mix(in oklch, var(--surface-tag-fallback-color) 38%, var(--s-color-border-subtle));
  background: color-mix(in oklch, var(--surface-tag-fallback-color) 8%, var(--s-color-bg-app));
}

/* Active — full fill */
.ds-surface-chip--design-system.ds-surface-chip--active {
  background: var(--surface-tag-design-system-color);
  border-color: var(--surface-tag-design-system-color);
  color: oklch(16% 0.04 60);
}

.ds-surface-chip--operations.ds-surface-chip--active {
  background: var(--surface-tag-operations-color);
  border-color: var(--surface-tag-operations-color);
  color: oklch(18% 0.05 220);
}

.ds-surface-chip--provenance.ds-surface-chip--active {
  background: var(--surface-tag-provenance-color);
  border-color: var(--surface-tag-provenance-color);
  color: oklch(18% 0.05 58);
}

.ds-surface-chip--marketing.ds-surface-chip--active {
  background: var(--surface-tag-marketing-color);
  border-color: var(--surface-tag-marketing-color);
  color: oklch(18% 0.05 180);
}

.ds-surface-chip--macro-and-structures.ds-surface-chip--active {
  background: var(--surface-tag-macro-color);
  border-color: var(--surface-tag-macro-color);
  color: oklch(18% 0.05 225);
}

.ds-surface-chip--routing.ds-surface-chip--active {
  background: var(--surface-tag-routing-color);
  border-color: var(--surface-tag-routing-color);
  color: oklch(18% 0.05 62);
}

.ds-surface-chip--shell.ds-surface-chip--active {
  background: var(--surface-tag-shell-color);
  border-color: var(--surface-tag-shell-color);
  color: oklch(18% 0.05 30);
}

.ds-surface-chip--studio.ds-surface-chip--active {
  background: var(--surface-tag-studio-color);
  border-color: var(--surface-tag-studio-color);
  color: oklch(18% 0.05 210);
}

.ds-surface-chip--projects.ds-surface-chip--active {
  background: var(--surface-tag-projects-color);
  border-color: var(--surface-tag-projects-color);
  color: oklch(18% 0.05 235);
}

.ds-surface-chip--other.ds-surface-chip--active {
  background: var(--surface-tag-fallback-color);
  border-color: var(--surface-tag-fallback-color);
  color: oklch(18% 0.04 145);
}

.ds-surface-chip:focus-visible {
  outline: 2px solid var(--s-color-accent-active, oklch(60% 0.05 180));
  outline-offset: 1px;
}