/*
 * BuxAccount CRM — umumiy uslublar.
 *
 * base.html <head> da {% static %} orqali ulanadi.
 * Asosiy dizayn Tailwind (CDN) bilan beriladi; bu yerda faqat
 * Tailwind utility'lari bilan qulay qilib bo'lmaydigan global qoidalar.
 */

body {
  font-family: "Inter", sans-serif;
}

/* Moliyaviy/raqamli ustunlar bir-biriga to'g'ri tushishi uchun monospace */
.num {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* Asosiy kontent (base.html <main>, overflow-auto) — aylantirish chizig'i uchun joy
   doim ajratilgan: kontent uzayib chiziq paydo bo'lganda eni torayib, jadval
   ustunlari "sakramasin" (masalan, Onlayn NKT'da yil/oy ochilganda) */
main {
  scrollbar-gutter: stable;
}

/* Alpine.js init bo'lguncha x-cloak elementlari ko'rinmasin (flicker oldini olish) */
[x-cloak] {
  display: none !important;
}

/* Kanban (SortableJS) — karta sudralayotganda qulay ko'rinish.
   tasks/kanban va leads/kanban sahifalarida ishlatiladi. */
.sortable-drag {
  cursor: grabbing;
  opacity: 0.9;
}
.sortable-chosen {
  cursor: grabbing;
}

/* ==================================================================
   Dizayn komponentlari — mijoz kartochkasida joriy etilmoqda

   Tailwind utility'lari takrorlanaverib, har kartada biroz boshqacha
   otstup/radius paydo bo'lgan edi. Bu yerda kartochka, maydon ro'yxati,
   status belgisi va ixcham jadval BIR marta ta'riflanadi.

   Dark mode — `.dark` klassi <html> da (tailwind.config darkMode: "class").
   ================================================================== */

:root {
  --c-surface: #ffffff;
  --c-line: #e5e7eb;
  --c-ink: #111827;
  --c-muted: #6b7280;
  --c-faint: #9ca3af;
  --c-hover: #f9fafb;
  --c-head: #f9fafb;
  --c-ink-2: #374151;
  --c-line-strong: #d1d5db;
}

.dark {
  --c-surface: #1f2937;
  --c-line: #374151;
  --c-ink: #f3f4f6;
  --c-muted: #9ca3af;
  --c-faint: #6b7280;
  --c-hover: #263243;
  --c-head: #1a2130;
  --c-ink-2: #d1d5db;
  --c-line-strong: #4b5563;
}

/* --- Kartochka --- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 11px 13px;
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 8px;
}

/* Kartochka sarlavhasidagi yordamchi havola/tugma — asosiy matndan yengilroq */
.card-action {
  font-size: 11px;
  font-weight: 400;
  color: #2563eb;
}
.dark .card-action { color: #60a5fa; }

/* --- Maydon ro'yxati (yorliq | qiymat) ---
   Ikki ustun: yorliq chapda qat'iy kenglikda, qiymat o'ngda. Bir-birining
   ostiga tushgan yorliq/qiymatdan ko'ra tez o'qiladi. Tor ekranda bir
   ustunga tushadi. */
dl.fields { margin: 0; display: grid; gap: 6px; }
dl.fields > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}
dl.fields dt { font-size: 11px; color: var(--c-muted); }
dl.fields dd { margin: 0; color: var(--c-ink); word-break: break-word; }

@media (max-width: 640px) {
  dl.fields > div { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}

/* --- Status belgisi ---
   To'q rangli fon o'rniga yengil fon + to'yingan matn: bir sahifada
   bir nechta belgi bo'lganda ko'zni charchatmaydi. */
.pill {
  display: inline-block;
  font-size: 11px;
  line-height: 1.6;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-ok { background: #dcfce7; color: #15803d; }
.pill-warn { background: #fef3c7; color: #a16207; }
.pill-danger { background: #fee2e2; color: #b91c1c; }
.pill-muted { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

.dark .pill-ok { background: #06281a; color: #4ade80; }
.dark .pill-warn { background: #2e2408; color: #fbbf24; }
.dark .pill-danger { background: #300f0f; color: #f87171; }
.dark .pill-muted { background: #263243; color: #d1d5db; border-color: #374151; }

/* --- Ixcham jadval (kartochka ichida) --- */
table.tbl { width: 100%; border-collapse: collapse; }
/* Sarlavha shrifti va otstupi jami qatori (`tr.tfoot`) bilan bir xil:
   asosiy font (Inter), 12px, oddiy yozuv, `--c-muted`; otstup — oddiy
   katak (6px) bilan teng. Avvalgi mono/10px/katta harf o'qishga og'ir edi. */
table.tbl th {
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-muted);
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
/* Sarlavha foni ham jami qatori bilan bir xil — har qanday jadvalda
   (avval faqat `.thead` klassli ro'yxat jadvallarida bor edi, kartochka
   ichidagi 37 ta jadval fonsiz qolardi) */
table.tbl thead th { background: var(--c-head); }
table.tbl td {
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
  vertical-align: top;
}
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl th.right, table.tbl td.right { text-align: right; }
/* Uzun sarlavha ikki qatorga tushishi mumkin (table-fixed jadvalda ustun eni tor bo'lsa) */
table.tbl th.wrap { white-space: normal; }
/* Tailwind tekislash utility'lari ham ishlasin — `table.tbl th` ustuvorligi
   `.text-right` dan yuqori, aks holda eski jadvallarda sarlavha va raqam
   ustuni bir-biriga mos kelmay qolardi */
table.tbl th.text-right, table.tbl td.text-right { text-align: right; }
table.tbl th.text-center, table.tbl td.text-center { text-align: center; }
/* Faqat oxirgi ustun o'ng chekkaga tegib turadi — o'rtadagi o'ngga
   tekislangan ustun keyingisiga yopishib qolmasligi uchun */
table.tbl th:last-child, table.tbl td:last-child { padding-right: 0; }
table.tbl td.idx { color: var(--c-faint); width: 24px; }

/* Avtomatik tartib raqami — server tomonda hisoblanmaydi.
   Sabab: HTMX bitta qatorni almashtirganda (`hx-swap="outerHTML"`)
   server yuborgan raqam yo'qolardi. Brauzer CSS hisoblagichini har
   almashtirishdan keyin o'zi qayta hisoblaydi. */
table.tbl tbody { counter-reset: tbl-row; }
table.tbl tbody tr { counter-increment: tbl-row; }
table.tbl td.idx-auto { color: var(--c-faint); text-align: right; }
table.tbl td.idx-auto::before { content: counter(tbl-row); }
/* Bo'sh holat qatori raqamlanmaydi */
table.tbl tbody tr:has(td.empty) { counter-increment: none; }
table.tbl tbody tr:hover td { background: var(--c-hover); }

/* --- Jadval jami qatori ---
   Ro'yxat oxiridagi yig'indi: chegara bilan ajratiladi va sarlavha foni
   bilan bir xil fonda turadi, ya'ni oddiy qatordan darhol farq qiladi. */
table.tbl tr.tfoot td {
  border-top: 1px solid var(--c-line);
  border-bottom: 0;
  background: var(--c-head);
  color: var(--c-muted);
  font-size: 12px;
}
table.tbl tr.tfoot:hover td { background: var(--c-head); }

/* --- Chekkasiz kartochka ichidagi jadval (.card-flush) ---
   `.card-flush`da gorizontal padding yo'q, shuning uchun jadval chetga
   yopishib qoladi. `.tbl-inset` birinchi va oxirgi ustunga bir xil ichki
   bo'shliq beradi — sarlavha katagi va qator katagi ayni vertikalda
   turadi (inline `padding-left` faqat `th`ga qo'yilganda ular siljib
   qolardi). */
table.tbl.tbl-inset th:first-child,
table.tbl.tbl-inset td:first-child { padding-left: 13px; }
table.tbl.tbl-inset th:last-child,
table.tbl.tbl-inset td:last-child { padding-right: 13px; }

/* Guruhlangan (ikki qatorli) sarlavha: 1-qatorda guruh nomi (`th.th-group`, colspan),
   guruhsiz ustunlar rowspan="2"; 2-qator `tr.th-sub`. Jadval chekkasida rowspan ustun
   tursa, 2-qatorning birinchi/oxirgi katagi chekkada EMAS — `.tbl-inset` chekka
   otstupi ularga tushmasin (`:has` bilan faqat shu holatda). Guruh chegarasi — chap
   chiziq (`th-sep`/`td-sep`). */
table.tbl th.th-group { text-align: center; }
table.tbl thead tr:first-child th[rowspan] { vertical-align: bottom; }
table.tbl.tbl-inset:has(thead tr:first-child th[rowspan]:first-child) tr.th-sub th:first-child:not(.th-sep) { padding-left: 0; }
table.tbl.tbl-inset:has(thead tr:first-child th[rowspan]:last-child) tr.th-sub th:last-child { padding-right: 10px; }
table.tbl th.th-sep, table.tbl td.td-sep { border-left: 1px solid var(--c-line); padding-left: 10px; }

/* Bo'sh jadval qatori — HAR QANDAY jadvalda bir xil (components/table_empty.html, UI031).
   Otstup barcha holatda BIR XIL va yetarlicha kuchli selektorda (tbl / tbl-inset
   qoidalaridan keyin): avval oddiy holatda `table.tbl td` otstupi, hover'da
   esa `tr:hover td.empty` otstupi ishlab, sichqoncha ustida qator balandlashardi.
   Hover faqat fonni boshqaradi (bo'sh qator ajratilmaydi). */
td.empty,
table.tbl td.empty,
table.tbl.tbl-inset td.empty { color: var(--c-muted); text-align: center; padding: 12px 13px; }
table.tbl tbody tr:hover td.empty { background: transparent; }

/* Tanlash (checkbox) ustuni — sarlavhadagi "hammasini tanlash" va
   qatordagi checkbox bir o'qda tursin. */
table.tbl th.check, table.tbl td.check { width: 34px; padding-right: 0; }
table.tbl td.check { vertical-align: middle; }
table.tbl th.check input, table.tbl td.check input { display: block; margin: 0; }

/* --- Mijoz kartochkasi tablari --- */
.ctabs {
  display: flex;
  align-items: center;
  gap: 2px;
  /* Pastki chiziq — inset soya: tab ostidagi faol chiziq uning ustiga tushadi.
     border + manfiy margin 1px vertikal toshish berib, overflow-x:auto bilan
     har tab qatorida kichik vertikal aylantirish chizig'i chiqarardi. */
  box-shadow: inset 0 -1px 0 var(--c-line);
  margin-bottom: 14px;
  overflow-x: auto;
  overflow-y: hidden;
}
.ctab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-bottom: 2px solid transparent;
  color: var(--c-muted);
  white-space: nowrap;
}
.ctab:hover { color: #2563eb; }
.dark .ctab:hover { color: #60a5fa; }
.ctab-on { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.dark .ctab-on { color: #60a5fa; border-bottom-color: #60a5fa; }
.ctab .cnt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  background: var(--c-hover);
  border: 1px solid var(--c-line);
  color: var(--c-muted);
  border-radius: 999px;
  padding: 0 5px;
}

/* --- Kartochka: otstupsiz varianti ---
   Ichida o'z otstupi bor bloklar uchun (sarlavha qatori + jadval). */
.card-flush {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 6px;
}

/* --- Jadval sarlavhasi (to'liq sahifa jadvallari) ---
   `.tbl` ixcham jadval uchun edi; bu esa ro'yxat sahifalaridagi katta
   jadvallar uchun — faqat fon va yozuv uslubi, otstuplar shablonda qoladi. */
.thead { background: var(--c-head); }
.thead th {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-muted);
}

/* --- DB rangidan yasaladigan yumshoq status belgisi ---
   Lookup jadvallarda `color` maydoni bor (masalan #3B82F6). Avval u fon
   sifatida to'liq ishlatilar edi — bir sahifada 5-6 to'q rangli belgi
   ko'zni charchatardi. Endi rang matnda qoladi, fon esa o'sha rangning
   yengil aralashmasi.

   Foydalanish:
       <span class="pill pill-dyn" style="--pill-color:{{ obj.color }}">…</span> */
.pill-dyn {
  background: color-mix(in srgb, var(--pill-color, #6b7280) 14%, transparent);
  color: var(--pill-color, #6b7280);
  border-color: color-mix(in srgb, var(--pill-color, #6b7280) 30%, transparent);
}
/* Dark fonda DB rangi ko'pincha to'q bo'ladi — matnni oqartirib o'qiladigan
   qilamiz, aks holda kontrast yetmaydi. */
.dark .pill-dyn {
  background: color-mix(in srgb, var(--pill-color, #9ca3af) 20%, transparent);
  color: color-mix(in srgb, var(--pill-color, #9ca3af) 65%, white);
  border-color: color-mix(in srgb, var(--pill-color, #9ca3af) 35%, transparent);
}
.pill-info { background: #dbeafe; color: #1d4ed8; }
.dark .pill-info { background: #10203c; color: #93c5fd; }

/* --- Kartochka sarlavha qatori (`.card-flush` ichida) ---
   `.card-title` otstupli kartochka uchun; bu esa chegara bilan ajratilgan
   sarlavha qatori (ostida jadval yoki ro'yxat turadi). */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--c-line);
  font-weight: 600;
  color: var(--c-ink);
}

/* --- Kartochka pastki qatori (`.card-flush` ichida) ---
   `.card-head` ning aksi: chegara bilan ajratilgan pastki qator — amal
   tugmalari ("Saqlash", "Bekor qilish") shu yerda. Modal oynada ham. */
.card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-top: 1px solid var(--c-line);
}

/* --- Modal oyna o'lchamlari (dizayn_qoidalari 5.4, UI024) ---
   Faqat uch o'lcham — kontekstga qarab tanlanadi:
     kichik   — tasdiqlash / ogohlantirish (1-2 jumla + tugmalar)
     o'rtacha — oddiy forma (3-6 maydon), default
     katta    — jadval, ikki-uch ustunli forma, uzun ro'yxat (64rem)
   Oyna: `.card-flush shadow-xl` + o'lcham klassi (kenglik 100%, max-width). */
.modal-sm, .modal-md, .modal-lg { width: 100%; }
.modal-sm { max-width: 28rem; }
.modal-md { max-width: 36rem; }
.modal-lg { max-width: 64rem; }
/* Modal tanasi — `.card-head` va `.card-foot` orasida; uzun mazmun oynaning
   o'zida aylanadi (sarlavha va tugmalar doim ko'rinadi). */
.modal-body {
  padding: 16px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

/* --- Tugmalar ---
   `.btn` — ikkilamchi (chegarali), `.btn-primary` — asosiy amal.
   Havola (`<a>`) ham, tugma (`<button>`) ham bir xil ko'rinadi. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-ink-2);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  /* Faqat ikonkali tugma (px-2.5 + 16px ikonka) matnli tugma bilan bir xil
     balandlikda: qator (1.5em) + vertikal otstup (12px) + chegara (2px).
     Aks holda sahifa sarlavhasida "Tahrirlash" 35px, ikonkalar 30px bo'lardi. */
  min-height: calc(1.5em + 14px);
  justify-content: center;
}
.btn:hover { background: var(--c-hover); }
.btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }

.btn-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.btn-primary:hover { background: #1d4ed8; }

/* Qaytarib bo'lmaydigan amal (o'chirish, bekor qilish). Bir xil qizil
   zanjir 8 joyda takrorlangan edi — komponentga ko'chirildi (1.15). */
.btn-danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}
.btn-danger:hover { background: #b91c1c; }
.btn-danger:disabled:hover,
.btn-danger[disabled]:hover { background: #dc2626; }

/* Holatni ijobiyga o'tkazuvchi amal: tasdiqlash, faollashtirish, yakunlash */
.btn-success { background: #16a34a; border-color: #16a34a; color: #ffffff; }
.btn-success:hover { background: #15803d; }

/* Qaytariladigan pasaytirish: nofaol qilish, arxivga, tasdiqsizlashtirish.
   Qizil (o'chirish) bilan adashmasligi uchun sariq. */
.btn-warn { background: #d97706; border-color: #d97706; color: #ffffff; }
.btn-warn:hover { background: #b45309; }

/* O'chirilgan tugma — bosib bo'lmasligi ko'rinib turishi kerak. Aks holda
   tugma odatdagidek ko'rinadi va foydalanuvchi uni qayta-qayta bosadi. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:disabled:hover,
.btn[disabled]:hover { background: var(--c-surface); }
.btn-primary:disabled:hover,
.btn-primary[disabled]:hover { background: #2563eb; }

/* Kichik tugma — zich jadval qatori va filtr satri uchun */
.btn-sm { padding: 2px 8px; font-size: 12px; gap: 4px; min-height: calc(1.5em + 6px); }

/* --- Forma maydonlari --- */
.input {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-ink);
  line-height: 1.5;
}
.input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* --- Qidiruv maydoni: `<input type="search">` (dizayn_qoidalari 5.3, UI018) ---
   Matn bo'lsa oxirida "x" — bosilsa maydon tozalanadi (filtr yangilanishi
   app.js `search` hodisasida). Brauzerning standart belgisi o'rniga Lucide
   "x" — matn rangida (currentColor), dark mode'da ham ko'rinadi.
   Safari'ning yumaloq "searchfield" ko'rinishi o'chiriladi — `.input` bilan bir xil. */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  cursor: pointer;
  background-color: currentColor;
  opacity: 0.45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 0.9; }

/* Global qidiruv natijasi klaviatura bilan tanlanganda (app.js) */
.popover-item[aria-selected="true"] { background: var(--c-hover); }
.input::placeholder { color: var(--c-faint); }
/* Kichik maydon — jadval ichidagi va zich filtr satridagi input/select */
.input-sm { padding: 3px 8px; font-size: 12px; }

/* --- Ochiladigan panel (dropdown menyu, qidiruv natijasi, tanlov ro'yxati) ---
   Kartochkadan farqi: soya va qatlam (z-index). Joylashuv (absolute,
   right-0, kenglik) shablonda Tailwind bilan beriladi.
   Ichidagi band: `.popover-item`. */
.popover {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  z-index: 20;
}
.popover-item {
  display: block;
  padding: 7px 12px;
  color: var(--c-ink);
}
.popover-item:hover { background: var(--c-hover); }

/* --- Majburiy maydon belgisi (UI017) ---
   `{{ form.x|label_req }}` / `{{ form.x|req_mark }}` qo'yadi — qo'lda yozilmaydi. */
.req { color: #dc2626; font-weight: 600; }
.dark .req { color: #f87171; }

/* --- Xato bloki (forma non_field_errors) ---
   Avval `bg-red-100 text-red-700` edi — dark rejimda to'q fonda och qizil
   plashka bo'lib turardi. Endi ikkala rejimda ham tokendan. */
.alert-danger {
  padding: 8px 13px;
  border-radius: 6px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.dark .alert-danger {
  background: #2a1212;
  color: #f87171;
  border-color: #4c1d1d;
}

/* Ogohlantirish bloki — xato emas, e'tibor talab qiladigan holat
   (masalan: shu davrga faktura allaqachon bor). Qizil fon "xato qildingiz"
   deydi, sariq esa "tekshirib ko'ring" — farqi shu. */
.alert-warn {
  padding: 8px 13px;
  border-radius: 6px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.dark .alert-warn {
  background: #2a2212;
  color: #fbbf24;
  border-color: #4c3d1d;
}

/* --- Faqat ko'rish rejimi (rol ruxsati) ---
   Joriy bo'limga "Ko'rish" darajasi bo'lgan xodimda yozish amallari
   yashiriladi: yaratish/tahrirlash/o'chirish havolalari, POST formalar va
   HTMX yozish so'rovlari. Server baribir 403 qaytaradi — bu faqat UI
   (bosib bo'lmaydigan tugma ko'rsatmaslik uchun). GET filtr formalari
   (qidiruv) tegilmaydi. */
main[data-readonly] a[href$="/new/"],
main[data-readonly] a[href*="/new/?"],
main[data-readonly] a[href*="/edit/"],
main[data-readonly] a[href*="/delete/"],
main[data-readonly] form[method="post" i],
main[data-readonly] [hx-post],
main[data-readonly] [hx-put],
main[data-readonly] [hx-patch],
main[data-readonly] [hx-delete] {
  display: none !important;
}

/* --- UI namunasi (/system/ui-kit/) — token rang namunalari --- */
.ui-swatch { height: 32px; border-radius: 6px; border: 1px solid var(--c-line); }
.ui-swatch[data-token="surface"] { background: var(--c-surface); }
.ui-swatch[data-token="line"] { background: var(--c-line); }
.ui-swatch[data-token="line-strong"] { background: var(--c-line-strong); }
.ui-swatch[data-token="ink"] { background: var(--c-ink); }
.ui-swatch[data-token="ink-2"] { background: var(--c-ink-2); }
.ui-swatch[data-token="muted"] { background: var(--c-muted); }
.ui-swatch[data-token="faint"] { background: var(--c-faint); }
.ui-swatch[data-token="hover"] { background: var(--c-hover); }