/* apply bold, the tool's components on app-tokens.css. Every class is .ds-*, so a screen can adopt them one at a
   time next to dashboard.css. Shown with real markup on /design-system.html (public/design-system.html). */

/* ---------- Type ---------- */
.ds-title { font: 600 var(--ds-title) / var(--ds-leading-tight) var(--ds-font-display); letter-spacing: var(--ds-tracking-display); color: var(--ds-ink); text-wrap: balance; margin: 0; }
.ds-title-sm { font: 600 var(--ds-title-sm) / 1.15 var(--ds-font-display); letter-spacing: -0.02em; color: var(--ds-ink); margin: 0; }
.ds-heading { font: 600 var(--ds-text-lg) / 1.3 var(--ds-font-ui); letter-spacing: -0.01em; color: var(--ds-ink); margin: 0; }
.ds-body { font: 400 var(--ds-text-md) / var(--ds-leading) var(--ds-font-ui); color: var(--ds-ink); }
.ds-meta { font-size: var(--ds-text-sm); line-height: 1.4; color: var(--ds-ink-2); }
.ds-caption { font-size: var(--ds-text-xs); line-height: 1.35; color: var(--ds-ink-3); }
.ds-number { font: 600 var(--ds-number) / 1 var(--ds-font-display); letter-spacing: var(--ds-tracking-display); font-variant-numeric: tabular-nums; }
.ds-number--xl { font-size: var(--ds-number-xl); font-weight: 700; }
/* The hand: one handwritten line per loud moment (empty states, onboarding, a first hello). Never in work areas. */
.ds-hand { font-family: var(--ds-font-hand); font-weight: 400; letter-spacing: 0; color: var(--ds-action-text); }

/* ---------- Buttons: pills, one fill colour each ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--ds-r-pill);
  font: 500 var(--ds-text-md) / 1 var(--ds-font-ui); white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--ds-surface-2); color: var(--ds-ink);
  transition: background-color var(--ds-t-hover), color var(--ds-t-hover), transform var(--ds-t-press) var(--ds-ease);
}
.ds-btn:hover { background: var(--ds-surface-3); }
.ds-btn:active { transform: scale(0.97); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ds-btn svg { width: 18px; height: 18px; flex: none; }
.ds-btn--primary { background: var(--ds-action); color: var(--ds-on-action); }
.ds-btn--primary:hover { background: var(--ds-action-hover); }
.ds-btn--ghost { background: transparent; color: var(--ds-ink-2); }
.ds-btn--ghost:hover { background: var(--ds-surface-2); color: var(--ds-ink); }
.ds-btn--danger { background: transparent; color: var(--ds-danger); }
.ds-btn--danger:hover { background: var(--ds-danger-soft); }
.ds-btn--destructive { background: var(--ds-danger); color: var(--ds-surface); }
.ds-btn--destructive:hover { opacity: 0.88; }
.ds-btn--sm { min-height: 30px; padding: 0 12px; font-size: var(--ds-text-sm); }
.ds-btn--lg { min-height: 44px; padding: 0 22px; }
.ds-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink-2); cursor: pointer; transition: background-color var(--ds-t-hover), color var(--ds-t-hover); }
.ds-icon-btn:hover { background: var(--ds-surface-2); color: var(--ds-ink); }
.ds-icon-btn svg { width: 18px; height: 18px; }

:where(.ds-btn, .ds-icon-btn, .ds-chip, .ds-nav-item, .ds-seg button, .ds-input, .ds-select, .ds-tile--btn):focus-visible {
  outline: 2px solid var(--ds-focus); outline-offset: 2px;
}

/* ---------- Form fields: the one place with lines ---------- */
.ds-field { display: grid; gap: 6px; }
.ds-label { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-ink-2); }
.ds-input, .ds-select {
  width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-control);
  background: var(--ds-surface); color: var(--ds-ink); font: 400 var(--ds-text-md) / 1.4 var(--ds-font-ui);
  transition: border-color var(--ds-t-hover);
}
.ds-input::placeholder { color: var(--ds-ink-3); }
.ds-input:hover, .ds-select:hover { border-color: var(--ds-line-strong); }
.ds-input:focus-visible { outline-offset: 0; border-color: var(--ds-focus); }
.ds-hint { font-size: var(--ds-text-xs); color: var(--ds-ink-3); }
.ds-field.is-invalid .ds-input { border-color: var(--ds-danger); }
.ds-field.is-invalid .ds-hint { color: var(--ds-danger); }

/* ---------- Chips and status ---------- */
.ds-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border: 0; border-radius: var(--ds-r-pill); background: var(--ds-surface-2); color: var(--ds-ink); font: 500 var(--ds-text-sm) / 1 var(--ds-font-ui); white-space: nowrap; cursor: pointer; transition: background-color var(--ds-t-hover); }
.ds-chip:hover { background: var(--ds-surface-3); }
.ds-chip svg { width: 14px; height: 14px; }

/* Status: a dot + the word, quiet. The dot carries the meaning, so the row stays calm. */
.ds-status { display: inline-flex; align-items: center; gap: 7px; font: 500 var(--ds-text-sm) / 1 var(--ds-font-ui); color: var(--ds-ink-2); white-space: nowrap; }
.ds-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--ds-ink-3)); }
.ds-status--applied { --dot: var(--ds-action); }
.ds-status--interview { --dot: var(--ds-people); }
.ds-status--offer { --dot: var(--ds-ok); }
.ds-status--rejected, .ds-status--withdrawn { --dot: var(--ds-ink-3); color: var(--ds-ink-3); }

/* Page state: the loud one. Live = a solid sun pill; draft and off stay quiet. */
.ds-page { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: var(--ds-r-pill); font: 600 var(--ds-text-xs) / 1 var(--ds-font-ui); white-space: nowrap; background: var(--ds-surface-2); color: var(--ds-ink-2); }
.ds-page--live { background: var(--ds-live); color: var(--ds-on-live); }
.ds-page--live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ds-page--off { background: transparent; color: var(--ds-ink-3); box-shadow: inset 0 0 0 1px var(--ds-line); }
@media (prefers-reduced-motion: no-preference) {
  .ds-page--live::before { animation: ds-pulse 2.4s var(--ds-ease) infinite; }
}
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Counters next to a name (hellos, unread) */
.ds-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ds-r-pill); background: var(--ds-surface-2); color: var(--ds-ink-2); font: 600 var(--ds-text-xs) / 1 var(--ds-font-ui); font-variant-numeric: tabular-nums; }
.ds-count--people { background: var(--ds-people); color: var(--ds-on-people); }

/* ---------- Surfaces ---------- */
.ds-card { background: var(--ds-surface); border-radius: var(--ds-r-card); box-shadow: var(--ds-card-edge); padding: var(--ds-space-5); }
.ds-card--btn { cursor: pointer; transition: box-shadow var(--ds-t-hover); }
.ds-card--btn:hover { box-shadow: var(--ds-card-edge-hover); }
.ds-card--flush { padding: 0; overflow: hidden; }
.ds-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }

/* KPI tiles. Plain by default; exactly one per screen may be --live (the views) or --people (hellos). */
.ds-tile { display: grid; align-content: space-between; gap: var(--ds-space-4); min-height: 132px; padding: var(--ds-space-5); border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-card-edge); color: var(--ds-ink); }
.ds-tile__label { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-ink-2); }
.ds-tile__foot { font-size: var(--ds-text-xs); color: var(--ds-ink-3); }
.ds-tile--btn { border: 0; text-align: left; font: inherit; cursor: pointer; transition: transform var(--ds-t-press) var(--ds-ease), background-color var(--ds-t-hover); }
.ds-tile--btn:hover { background: var(--ds-surface-2); }
.ds-tile--btn:active { transform: scale(0.99); }
.ds-tile--live { background: var(--ds-live); color: var(--ds-on-live); border-radius: var(--ds-r-sheet); box-shadow: none; }
.ds-tile--people { background: var(--ds-people); color: var(--ds-on-people); border-radius: var(--ds-r-sheet); box-shadow: none; }
.ds-tile--live .ds-tile__label, .ds-tile--live .ds-tile__foot,
.ds-tile--people .ds-tile__label, .ds-tile--people .ds-tile__foot { color: inherit; opacity: 0.8; }
.ds-tile--live.ds-tile--btn:hover { background: var(--ds-sun-300); }
.ds-tile--people.ds-tile--btn:hover { background: var(--ds-orange-300); }

/* ---------- Navigation ---------- */
.ds-nav { display: grid; gap: 2px; }
.ds-nav__group { margin: var(--ds-space-4) 0 var(--ds-space-1); padding: 0 10px; font-size: var(--ds-text-xs); font-weight: 500; color: var(--ds-ink-3); }
.ds-nav-item { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--ds-r-control); background: transparent; color: var(--ds-ink-2); font: 500 var(--ds-text-md) / 1 var(--ds-font-ui); text-decoration: none; cursor: pointer; transition: background-color var(--ds-t-hover), color var(--ds-t-hover); }
.ds-nav-item svg { width: 18px; height: 18px; flex: none; }
.ds-nav-item:hover { background: var(--ds-surface-2); color: var(--ds-ink); }
.ds-nav-item[aria-current="page"] { background: var(--ds-action-soft); color: var(--ds-ink); }
.ds-nav-item[aria-current="page"] svg { color: var(--ds-action-text); }
.ds-nav-item .ds-count { margin-left: auto; }

/* Segmented control: view tabs, date ranges, layout switches */
.ds-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ds-r-pill); background: var(--ds-action-soft); }
.ds-seg button { min-height: 28px; padding: 0 12px; border: 0; border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-action-text); font: 500 var(--ds-text-sm) / 1 var(--ds-font-ui); cursor: pointer; transition: background-color var(--ds-t-hover), color var(--ds-t-hover); }
.ds-seg button:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--ds-action) 12%, transparent); }
.ds-seg button[aria-pressed="true"] { background: var(--ds-action); color: var(--ds-on-action); font-weight: 600; box-shadow: 0 1px 3px rgb(29 71 230 / 0.3); }

/* ---------- Tables: lines are allowed here, rows are the unit ---------- */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-md); }
.ds-table th { padding: 10px 12px; text-align: left; font-size: var(--ds-text-xs); font-weight: 500; color: var(--ds-ink-3); border-bottom: 1px solid var(--ds-line); white-space: nowrap; }
.ds-table td { padding: 14px 12px; border-bottom: 1px solid var(--ds-line); vertical-align: middle; }
.ds-table tbody tr { transition: background-color var(--ds-t-hover); }
.ds-table tbody tr:hover { background: var(--ds-surface-2); }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table__name { font-weight: 600; }
.ds-table__sub { display: block; margin-top: 2px; font-size: var(--ds-text-sm); color: var(--ds-ink-2); }

/* ---------- Progress (onboarding, plan usage) ---------- */
.ds-progress { height: 8px; border-radius: var(--ds-r-pill); background: var(--ds-surface-3); overflow: hidden; }
.ds-progress > span { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--ds-live); transition: width var(--ds-t-enter) var(--ds-ease); }
.ds-progress--action > span { background: var(--ds-action); }

/* ---------- Floating: menus, toasts, dialogs (the only shadows) ---------- */
.ds-menu { display: grid; gap: 1px; min-width: 200px; padding: 6px; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow-float); }
.ds-menu__item { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--ds-r-control); background: transparent; color: var(--ds-ink); font: 400 var(--ds-text-md) / 1 var(--ds-font-ui); text-align: left; cursor: pointer; }
.ds-menu__item:hover, .ds-menu__item:focus-visible { background: var(--ds-surface-2); outline: none; }
.ds-menu__item svg { width: 16px; height: 16px; color: var(--ds-ink-2); }
.ds-menu__item.is-checked::after { content: '✓'; margin-left: auto; color: var(--ds-action-text); }
.ds-menu__item--danger { color: var(--ds-danger); }
.ds-menu__sep { height: 1px; margin: 4px 6px; background: var(--ds-line); }

.ds-toast { display: flex; align-items: center; gap: var(--ds-space-3); max-width: 420px; padding: 12px 12px 12px 18px; border-radius: var(--ds-r-pill); background: var(--ds-ink); color: var(--ds-surface); font: 500 var(--ds-text-md) / 1.3 var(--ds-font-ui); box-shadow: var(--ds-shadow-float); }
.ds-toast .ds-btn { background: rgb(255 255 255 / 0.14); color: inherit; }
.ds-toast--people { background: var(--ds-people); color: var(--ds-on-people); }
.ds-toast--people .ds-btn { background: rgb(43 20 0 / 0.12); }
.ds-toast--live { background: var(--ds-live); color: var(--ds-on-live); }
.ds-toast--live .ds-btn { background: rgb(51 37 0 / 0.12); }

.ds-dialog { width: min(480px, 100% - 32px); padding: var(--ds-space-6); border: 0; border-radius: var(--ds-r-sheet); background: var(--ds-surface); color: var(--ds-ink); box-shadow: var(--ds-shadow-dialog); }
.ds-dialog::backdrop { background: var(--ds-scrim); }
.ds-dialog__actions { display: flex; justify-content: flex-end; gap: var(--ds-space-2); margin-top: var(--ds-space-5); }

/* ---------- Empty state: a loud moment (illustration + one handwritten line + one action) ---------- */
.ds-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--ds-space-6); padding: var(--ds-space-6); border-radius: var(--ds-r-sheet); background: var(--ds-surface); box-shadow: var(--ds-card-edge); }
.ds-empty__art { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--ds-space-5); border-radius: var(--ds-r-card); overflow: hidden; background: color-mix(in srgb, var(--ds-surface-2) 55%, var(--ds-surface)); }
.ds-empty__art img { display: block; width: calc(100% + 2 * var(--ds-space-5)); height: calc(100% + 2 * var(--ds-space-5)); margin: calc(-1 * var(--ds-space-5)); object-fit: cover; }
.ds-empty__body { display: grid; gap: var(--ds-space-3); justify-items: start; max-width: 40ch; white-space: normal; text-align: left; }
.ds-empty__body > * { margin: 0; }
.ds-empty__note { font-size: 22px; line-height: 1.1; transform: rotate(-2deg); transform-origin: left center; }
.ds-empty__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-top: var(--ds-space-2); }
/* float (a page's list) and compact (a panel, drawer or dialog, "nothing matches this view"): no card of its own, the
   illustration and a short line stacked and centred on whatever is behind them */
:is(.ds-empty--float, .ds-empty--compact) { grid-template-columns: 1fr; justify-items: center; gap: var(--ds-space-4); background: none; box-shadow: none; border-radius: 0; }
:is(.ds-empty--float, .ds-empty--compact) .ds-empty__art { aspect-ratio: auto; padding: 0; background: none; overflow: visible; }
:is(.ds-empty--float, .ds-empty--compact) .ds-empty__body { justify-items: center; gap: var(--ds-space-2); max-width: none; text-align: center; }
:is(.ds-empty--float, .ds-empty--compact) .ds-empty__body > p { max-width: 34ch; }
:is(.ds-empty--float, .ds-empty--compact) .ds-empty__actions { justify-content: center; }
.ds-empty--float { padding: var(--ds-space-8) var(--ds-space-4); }
.ds-empty--float .ds-empty__art { width: min(100%, 260px); }
.ds-empty--compact { gap: var(--ds-space-3); padding: var(--ds-space-6) var(--ds-space-4); }
.ds-empty--compact .ds-empty__art { width: min(100%, 160px); }
.ds-empty--compact .ds-empty__body { gap: var(--ds-space-1); }
.ds-empty__label { font: 500 var(--ds-text-sm) / 1.4 var(--ds-font-ui); color: var(--ds-ink-2); }
.ds-empty--compact .ds-empty__actions { margin-top: var(--ds-space-2); }
@media (max-width: 720px) { .ds-empty:not(.ds-empty--float, .ds-empty--compact) { grid-template-columns: 1fr; padding: var(--ds-space-5); } }

/* The empty states' illustrations (dashboard/core/empty.js): the tool's own pieces, flat, in role tokens */
.ds-art { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.ds-art .a-card { fill: var(--ds-surface); stroke: var(--ds-line-strong); stroke-width: 1.5; }
.ds-art .a-back { opacity: 0.55; }
.ds-art .a-bar { fill: var(--ds-surface-3); }
.ds-art .a-bar2 { fill: var(--ds-surface-2); }
.ds-art .a-ink { fill: var(--ds-ink-3); }
.ds-art .a-act { fill: var(--ds-action); }
.ds-art .a-act-soft { fill: var(--ds-action-soft); }
.ds-art .a-live { fill: var(--ds-live); }
.ds-art .a-people { fill: var(--ds-people); }
.ds-art .a-on { fill: none; stroke: var(--ds-on-action); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ds-art .a-on-fill { fill: var(--ds-on-action); }
.ds-art .a-stroke { fill: none; stroke: var(--ds-ink-3); stroke-width: 2; stroke-linecap: round; }
.ds-art .a-line { fill: none; stroke: var(--ds-line-strong); stroke-width: 1.5; }
.ds-art .a-dash { fill: none; stroke: var(--ds-line-strong); stroke-width: 1.5; stroke-dasharray: 5 5; }
/* the help panel's card pictures (public/js/help-art.js): the login pages' flat look, fixed colours per ground (no dark variant, as there) */
.help-art { display: block; width: 100%; height: auto; border-radius: calc(var(--ds-r-card) - 4px);
  --g: var(--ds-blue-600); --soft: var(--ds-blue-100); --ink: var(--ds-blue-950); --a: var(--ds-sun-600); --b: var(--ds-orange-600); background: var(--g); }
.help-art--sun { --g: var(--ds-sun-600); --soft: var(--ds-sun-100); --ink: var(--ds-sun-950); --a: var(--ds-blue-600); --b: var(--ds-orange-600); }
.help-art--orange { --g: var(--ds-orange-600); --soft: var(--ds-orange-100); --ink: var(--ds-orange-950); --a: var(--ds-sun-600); --b: var(--ds-blue-600); }
.help-art .h-card { fill: #fff; }
.help-art .h-soft { fill: var(--soft); }
.help-art .h-soft-on { fill: #fff; opacity: 0.35; }
.help-art .h-ink { fill: var(--ink); }
.help-art .h-a { fill: var(--a); }
.help-art .h-b { fill: var(--b); }
.help-art .h-on-fill { fill: #fff; }
.help-art .h-dim { opacity: 0.6; }
.help-art .h-on { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.help-art .h-on--big { stroke-width: 3.5; }
.help-art .h-ink-line, .help-art .h-b-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.help-art .h-b-line { stroke: var(--b); stroke-width: 3; }
.help-art .h-dash { stroke-dasharray: 2 5; }
.help-art .h-cursor { fill: var(--ink); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .ds-empty .ds-art .a-act { transform-box: fill-box; transform-origin: center; animation: ds-nudge 2.4s var(--ds-ease) 0.4s 2; }
}
@keyframes ds-nudge { 50% { transform: scale(1.12); } }

/* ---------- Skeletons: bones where the content will be (dashboard/core/empty.js) ---------- */
.ds-skel { display: block; height: 10px; max-width: 100%; border-radius: var(--ds-r-pill); background: var(--ds-surface-2); }
.ds-skel + .ds-skel { margin-top: var(--ds-space-2); }
.ds-skel--lg { height: 12px; }
.ds-skel--figure { height: 32px; border-radius: var(--ds-r-control); }
.ds-skel--avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; }
.ds-skel--cover { width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: var(--ds-space-1); border-radius: var(--ds-r-control); }
@media (prefers-reduced-motion: no-preference) {
  .ds-skel {
    background: linear-gradient(90deg, var(--ds-surface-2) 0 40%, var(--ds-surface-3) 50%, var(--ds-surface-2) 60% 100%) 0 0 / 300% 100%;
    animation: ds-shimmer 1.5s ease-in-out infinite;
  }
}
@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ds-skel-card { display: grid; gap: 0; align-content: start; padding: var(--ds-space-3); } /* the card look: the shared card list at the end of dashboard.css */
.ds-skel-item { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) 0; }
.ds-skel-item__lines { flex: 1; min-width: 0; }
.ds-skel-tile { align-content: space-between; }
.ds-skel-tile .ds-skel { min-width: min(4rem, 100%); }
.ds-skel-lines { display: grid; padding: var(--ds-space-4) 0; }
/* a load that failed, where its skeleton was: a short line and Try again */
.ds-load-error { display: grid; justify-items: center; gap: var(--ds-space-2); padding: var(--ds-space-6) var(--ds-space-4); color: var(--ds-ink-3); font-size: var(--ds-text-sm); text-align: center; }

/* ---------- Motion: one entrance for content that arrives (live rows, a new card) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ds-enter { animation: ds-enter var(--ds-t-enter) var(--ds-ease) both; }
}
@keyframes ds-enter { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Tags (labels): a clear tint, the hue's deep shade as text and a solid dot ----------
   Ten colours (the label picker's, dashboard.js LABEL_COLORS) tuned to sit next to the blue / sun / orange ramps:
   brighter than a grey wash, still quiet enough for a table full of them. One rule per colour for both themes
   (light-dark() follows the color-scheme the dark tokens set). */
.ds-tag {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 22px; padding: 0 9px 0 7px;
  border-radius: var(--ds-r-pill); background: var(--tag-bg); color: var(--tag-fg);
  font: 500 var(--ds-text-xs) / 1 var(--ds-font-ui); white-space: nowrap;
}
.ds-tag::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tag-dot); }
.ds-tag--default { --tag-bg: var(--ds-surface-2); --tag-fg: var(--ds-ink-2); --tag-dot: var(--ds-ink-3); }
.ds-tag--gray   { --tag-bg: light-dark(#e9e9ef, rgb(160 160 180 / 0.18)); --tag-fg: light-dark(#3d3d48, #d0d0dc); --tag-dot: light-dark(#8a8a98, #8e8f9e); }
.ds-tag--brown  { --tag-bg: light-dark(#f2e5da, rgb(190 130 85 / 0.22)); --tag-fg: light-dark(#5c3a20, #e8c4a6); --tag-dot: light-dark(#a0714d, #c08a5e); }
.ds-tag--orange { --tag-bg: light-dark(var(--ds-orange-100), rgb(255 138 31 / 0.2)); --tag-fg: light-dark(#7a3900, #ffc58a); --tag-dot: var(--ds-orange-600); }
.ds-tag--yellow { --tag-bg: light-dark(var(--ds-sun-100), rgb(255 210 63 / 0.18)); --tag-fg: light-dark(#5c4300, var(--ds-sun-300)); --tag-dot: light-dark(#d9a800, var(--ds-sun-600)); }
.ds-tag--green  { --tag-bg: light-dark(#d6f5e0, rgb(60 200 120 / 0.18)); --tag-fg: light-dark(#145c33, #9be3b6); --tag-dot: light-dark(#22a55a, #3cc878); }
.ds-tag--blue   { --tag-bg: light-dark(var(--ds-blue-100), rgb(61 102 255 / 0.24)); --tag-fg: light-dark(var(--ds-blue-800), #b3c4ff); --tag-dot: light-dark(var(--ds-blue-600), #5b7dff); }
.ds-tag--purple { --tag-bg: light-dark(#ebe1ff, rgb(140 100 255 / 0.24)); --tag-fg: light-dark(#4b2a99, #cdb8ff); --tag-dot: light-dark(#7c4dff, #9b7aff); }
.ds-tag--pink   { --tag-bg: light-dark(#ffdcee, rgb(240 80 160 / 0.22)); --tag-fg: light-dark(#8a1d58, #ffb3d6); --tag-dot: light-dark(#e5408f, #f0509f); }
.ds-tag--red    { --tag-bg: light-dark(#ffe0dc, rgb(240 70 60 / 0.22)); --tag-fg: light-dark(#9b1c13, #ffb1aa); --tag-dot: light-dark(#e5392b, #f0463c); }
.ds-tag--lg { height: 30px; gap: 7px; padding: 0 12px 0 10px; font-size: var(--ds-text-sm); }
.ds-tag--lg::before { width: 7px; height: 7px; }