/* GENERATED FILE — do not edit.
   Source: public/categories.json. Regenerate: npm run tokens
   Category colour tokens and the components that read them. */

/* Seven hues, 42deg apart in Lab, with one deliberate 108deg void between
   marketplace (hue 44) and rights (hue 152). Lime — the brand accent — lives at
   hue 115, in the middle of that void, which is why no category ever fights the
   highlighter. Lightness alternates around the ring so neighbouring categories
   differ in two channels, not just hue. Every value below clears WCAG AA as
   text on the surface it lands on, IN BOTH THEMES, asserted in
   test/categories.test.mjs.

   Each token is a light-dark() pair rather than a light value plus a dark media
   block, because a visitor can now choose a theme explicitly and
   prefers-color-scheme reports the operating system rather than that choice.
   light-dark() follows the root's used colour scheme, so a category is the
   right colour under an explicit light choice on a dark machine, and the
   reverse. The plain value on the line above each pair is what a browser too
   old for light-dark() keeps — the light ramp, intact, rather than no colour. */
:root {
  --cat-marketplace: #b54321;
  --cat-marketplace: light-dark(#b54321, #ffa887);
  --cat-marketplace-wash: #ffe7dc;
  --cat-marketplace-wash: light-dark(#ffe7dc, #4c332b);
  --cat-property: #005d5c;
  --cat-property: light-dark(#005d5c, #60d2cf);
  --cat-property-wash: #d8f3f2;
  --cat-property-wash: light-dark(#d8f3f2, #243d3c);
  --cat-vehicles: #006e99;
  --cat-vehicles: light-dark(#006e99, #34d0ff);
  --cat-vehicles-wash: #d6f2ff;
  --cat-vehicles-wash: light-dark(#d6f2ff, #203d48);
  --cat-business: #004f94;
  --cat-business: light-dark(#004f94, #95c1ff);
  --cat-business-wash: #e5eeff;
  --cat-business-wash: light-dark(#e5eeff, #30394d);
  --cat-content: #6a5100;
  --cat-content: light-dark(#6a5100, #d9b76e);
  --cat-content-wash: #f8ebd5;
  --cat-content-wash: light-dark(#f8ebd5, #413826);
  --cat-occasions: #a01d54;
  --cat-occasions: light-dark(#a01d54, #ff9fc0);
  --cat-occasions-wash: #ffe5ed;
  --cat-occasions-wash: light-dark(#ffe5ed, #4d3139);
}

/* One attribute sets both channels, and every component below reads --cat /
   --cat-wash rather than naming a category. That is the whole reason a job
   never carries a colour of its own: put data-cat on an element and its
   descendants are already the right colour, in both themes. */
[data-cat="marketplace"] { --cat: var(--cat-marketplace); --cat-wash: var(--cat-marketplace-wash); }
[data-cat="property"] { --cat: var(--cat-property); --cat-wash: var(--cat-property-wash); }
[data-cat="vehicles"] { --cat: var(--cat-vehicles); --cat-wash: var(--cat-vehicles-wash); }
[data-cat="business"] { --cat: var(--cat-business); --cat-wash: var(--cat-business-wash); }
[data-cat="content"] { --cat: var(--cat-content); --cat-wash: var(--cat-content-wash); }
[data-cat="occasions"] { --cat: var(--cat-occasions); --cat-wash: var(--cat-occasions-wash); }

/* --- components ------------------------------------------------------- */

/* The icon. Sized in em so it tracks whatever type it sits beside. */
.cat-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: var(--cat, currentColor);
}

/* The label pill: icon + category name. */
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: var(--cat-wash);
  color: var(--cat);
  border: 1.5px solid color-mix(in srgb, var(--cat) 30%, transparent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
}

/* The badge: the icon alone in a filled tile. This is what makes a list of
   jobs scannable — the eye finds the colour and shape before it reads a word. */
.cat-tile {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 13px;
  background: var(--cat-wash);
  border: 2px solid var(--cat);
  color: var(--cat);
}
.cat-tile .cat-icon { width: 22px; height: 22px; }

.cat-tile-sm { width: 34px; height: 34px; border-radius: 11px; }
.cat-tile-sm .cat-icon { width: 18px; height: 18px; }

/* A left edge in the category colour, for rows and cards that are already
   bordered and would look busy with a second outline. */
.cat-edge { border-left: 4px solid var(--cat); }

/* Fallback for the one browser generation that lacks color-mix: a flat border
   rather than no border. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .cat-chip { border-color: var(--cat); }
}