:root{
  --chip-font-family:Inter, sans-serif;
  --chip-font-size:12px;
  --chip-font-weight:600;
  --chip-line-height:1.2;
  --chip-padding-y:0px;
  --chip-padding-x:10px;
  --chip-radius:999px;
  --chip-gap:6px;
  --chip-min-height:28px;
  --chip-border-width:1px;
  --chip-filter-font-size:14px;
  --chip-filter-font-weight:600;
  --chip-filter-line-height:1.1;
  --chip-filter-padding-x:14px;
  --chip-filter-radius:20px;
  --chip-filter-min-height:36px;
  --chip-filter-bg:#F0F2F5;
  --chip-filter-text:#5F6D7F;
  --chip-filter-border:#D8DDE5;
  --chip-filter-hover-bg:#E4E9EF;
  --chip-filter-hover-text:#31475F;
  --chip-filter-hover-border:#CBD4DE;
  --chip-filter-active-bg:#DCE9F7;
  --chip-filter-active-text:#1F5F9B;
  --chip-filter-active-border:#B7CFE6;

  --token-blue-bg:#DCE9F5;
  --token-blue-text:#1C597E;
  --token-blue-border:transparent;

  --token-green-bg:#D8F0E5;
  --token-green-text:#1D7A46;
  --token-green-border:transparent;

  --token-cyan-bg:#DDF1F4;
  --token-cyan-text:#1F7F8F;
  --token-cyan-border:transparent;

  --token-sky-bg:#8CD1E8;
  --token-sky-text:#1C597D;
  --token-sky-border:transparent;

  --token-coral-bg:#FCE8E7;
  --token-coral-text:#B02626;
  --token-coral-border:transparent;

  --token-purple-bg:#EDE9FB;
  --token-purple-text:#5252C2;
  --token-purple-border:transparent;

  --token-grey-bg:#F0F2F5;
  --token-grey-text:#4F5969;
  --token-grey-border:transparent;

  --token-yellow-bg:#FFF8D6;
  --token-yellow-text:#7A5500;
  --token-yellow-border:transparent;

  --chip-tone-source-bg:var(--token-blue-bg);
  --chip-tone-source-text:var(--token-blue-text);
  --chip-tone-source-border:var(--token-blue-border);

  --chip-tone-status-bg:var(--token-green-bg);
  --chip-tone-status-text:var(--token-green-text);
  --chip-tone-status-border:var(--token-green-border);

  --chip-tone-format-bg:var(--token-cyan-bg);
  --chip-tone-format-text:var(--token-cyan-text);
  --chip-tone-format-border:var(--token-cyan-border);

  --chip-tone-type-bg:var(--token-blue-bg);
  --chip-tone-type-text:var(--token-blue-text);
  --chip-tone-type-border:var(--token-blue-border);

  --chip-tone-neutral-bg:var(--token-grey-bg);
  --chip-tone-neutral-text:var(--token-grey-text);
  --chip-tone-neutral-border:var(--token-grey-border);

  --chip-tone-topic-bg:#ffffff;
  --chip-tone-topic-text:#6f8499;
  --chip-tone-topic-border:#d7e3ee;

  --chip-selected-bg:var(--token-blue-bg);
  --chip-selected-text:var(--token-blue-text);
  --chip-selected-border:#b9d0e6;

  --chip-disabled-bg:#f4f6f8;
  --chip-disabled-text:#9aa7b5;
  --chip-disabled-border:#d7e3ee;
}

/* Base source of truth */
.chip,
.event-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:auto !important;
  max-width:max-content !important;
  flex:0 0 auto !important;
  min-height:var(--chip-min-height) !important;
  padding:var(--chip-padding-y) var(--chip-padding-x) !important;
  gap:var(--chip-gap) !important;
  border-radius:var(--chip-radius) !important;
  border:var(--chip-border-width) solid transparent !important;
  font-family:var(--chip-font-family) !important;
  font-size:var(--chip-font-size) !important;
  font-weight:var(--chip-font-weight) !important;
  line-height:var(--chip-line-height) !important;
  letter-spacing:normal !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  vertical-align:middle !important;
  box-shadow:none !important;
  background:var(--chip-tone-neutral-bg) !important;
  color:var(--chip-tone-neutral-text) !important;
  border-color:var(--chip-tone-neutral-border) !important;
}

/* Canonical kind layer */
.chip--source{
  background:var(--chip-tone-source-bg) !important;
  color:var(--chip-tone-source-text) !important;
  border-color:var(--chip-tone-source-border) !important;
}

.chip--status{
  background:var(--chip-tone-status-bg) !important;
  color:var(--chip-tone-status-text) !important;
  border-color:var(--chip-tone-status-border) !important;
}

.chip--format{
  background:var(--chip-tone-format-bg) !important;
  color:var(--chip-tone-format-text) !important;
  border-color:var(--chip-tone-format-border) !important;
}

.chip--type{
  background:var(--chip-tone-type-bg) !important;
  color:var(--chip-tone-type-text) !important;
  border-color:var(--chip-tone-type-border) !important;
}

.chip--neutral{
  background:var(--chip-tone-neutral-bg) !important;
  color:var(--chip-tone-neutral-text) !important;
  border-color:var(--chip-tone-neutral-border) !important;
}

.chip--topic,
.chip--outline{
  background:var(--chip-tone-topic-bg) !important;
  color:var(--chip-tone-topic-text) !important;
  border-color:var(--chip-tone-topic-border) !important;
}

/* Canonical size layer */
.chip--sm{
  --chip-font-size:11px;
  --chip-padding-x:8px;
  --chip-gap:5px;
  --chip-min-height:24px;
}

.chip--md{
  --chip-font-size:12px;
  --chip-padding-x:10px;
  --chip-gap:6px;
  --chip-min-height:28px;
}

.chip--lg{
  --chip-font-size:13px;
  --chip-padding-x:12px;
  --chip-gap:8px;
  --chip-min-height:32px;
}

/* State layer */
.chip--selected,
.chip.is-active{
  background:var(--chip-selected-bg) !important;
  color:var(--chip-selected-text) !important;
  border-color:var(--chip-selected-border) !important;
}

.chip--disabled,
.chip[disabled],
.chip[aria-disabled="true"]{
  background:var(--chip-disabled-bg) !important;
  color:var(--chip-disabled-text) !important;
  border-color:var(--chip-disabled-border) !important;
  pointer-events:none !important;
  opacity:1 !important;
}

.chip--filter{
  min-height:var(--chip-filter-min-height) !important;
  padding:0 var(--chip-filter-padding-x) !important;
  border-radius:var(--chip-filter-radius) !important;
  font-size:var(--chip-filter-font-size) !important;
  font-weight:var(--chip-filter-font-weight) !important;
  line-height:var(--chip-filter-line-height) !important;
  background:var(--chip-filter-bg) !important;
  color:var(--chip-filter-text) !important;
  border-color:var(--chip-filter-border) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset !important;
}

.chip--filter:hover{
  background:var(--chip-filter-hover-bg) !important;
  color:var(--chip-filter-hover-text) !important;
  border-color:var(--chip-filter-hover-border) !important;
}

.chip--filter.is-active,
.chip--filter.chip--selected{
  background:var(--chip-filter-active-bg) !important;
  color:var(--chip-filter-active-text) !important;
  border-color:var(--chip-filter-active-border) !important;
}

/* Tone aliases kept for compatibility, still token-driven */
.chip--blue,
.chip--tone-blue{
  background:var(--token-blue-bg) !important;
  color:var(--token-blue-text) !important;
  border-color:var(--token-blue-border) !important;
}

.chip--green,
.chip--tone-green{
  background:var(--token-green-bg) !important;
  color:var(--token-green-text) !important;
  border-color:var(--token-green-border) !important;
}

.chip--cyan,
.chip--tone-cyan{
  background:var(--token-cyan-bg) !important;
  color:var(--token-cyan-text) !important;
  border-color:var(--token-cyan-border) !important;
}

.chip--sky,
.chip--tone-sky{
  background:var(--token-sky-bg) !important;
  color:var(--token-sky-text) !important;
  border-color:var(--token-sky-border) !important;
}

.chip--yellow,
.chip--amber{
  background:var(--token-yellow-bg) !important;
  color:var(--token-yellow-text) !important;
  border-color:var(--token-yellow-border) !important;
}

.chip--coral,
.chip--red,
.chip--tone-coral{
  background:var(--token-coral-bg) !important;
  color:var(--token-coral-text) !important;
  border-color:var(--token-coral-border) !important;
}

.chip--purple,
.chip--violet,
.chip--tone-purple{
  background:var(--token-purple-bg) !important;
  color:var(--token-purple-text) !important;
  border-color:var(--token-purple-border) !important;
}

.chip--gray,
.chip--grey,
.chip--tone-gray,
.chip--tone-grey{
  background:var(--token-grey-bg) !important;
  color:var(--token-grey-text) !important;
  border-color:var(--token-grey-border) !important;
}

/* Legacy compatibility aliases */
:where(.pill--filled, .pill--status-blue){
  display:inline-flex;
  align-items:center;
  min-height:var(--chip-min-height);
  padding:var(--chip-padding-y) var(--chip-padding-x);
  border-radius:var(--chip-radius);
  font-family:var(--chip-font-family);
  font-size:var(--chip-font-size);
  font-weight:var(--chip-font-weight);
  line-height:var(--chip-line-height);
  background:var(--token-blue-bg);
  color:var(--token-blue-text);
}

:where(.pill--status-gray){
  display:inline-flex;
  align-items:center;
  min-height:var(--chip-min-height);
  padding:var(--chip-padding-y) var(--chip-padding-x);
  border-radius:var(--chip-radius);
  font-family:var(--chip-font-family);
  font-size:var(--chip-font-size);
  font-weight:var(--chip-font-weight);
  line-height:var(--chip-line-height);
  background:var(--token-grey-bg);
  color:var(--token-grey-text);
}

:where(.pill--topic){
  background:var(--chip-tone-topic-bg);
  color:var(--chip-tone-topic-text);
  border:1px solid var(--chip-tone-topic-border);
}

:where(.meta-pill--blue){background:var(--token-blue-bg);border-color:var(--token-blue-border);color:var(--token-blue-text)}
:where(.meta-pill--cyan){background:var(--token-cyan-bg);border-color:var(--token-cyan-border);color:var(--token-cyan-text)}
:where(.meta-pill--coral){background:var(--token-coral-bg);border-color:var(--token-coral-border);color:var(--token-coral-text)}
:where(.meta-pill--purple){background:var(--token-purple-bg);border-color:var(--token-purple-border);color:var(--token-purple-text)}
:where(.meta-pill--gray){background:var(--token-grey-bg);border-color:var(--token-grey-border);color:var(--token-grey-text)}
