/* ═══════════════════════════════════════════════════════════════════
   TERMINA — CATEGORY COLOUR: "BISER" (CGP v11)

   Ten groups, ten colours, one theme. A hair studio is blush, a garage
   is periwinkle, a dog groomer is mint. A customer with six appointments
   tells them apart before reading a single word, and a profile says what
   kind of place it is the moment it opens.

   All ten are defined here, although the search page currently shows
   five: the other five WAIT for their first provider
   (server/categories.js). A colour that arrives late is a colour that
   arrives wrong, so it is built now and simply not drawn yet.

   Termina's own neutral remains for a view with no category — the
   landing page, a mixed search, an empty state.

   ── The pair ───────────────────────────────────────────────────────

   Each category is a light warm ground and a PASTEL partner, the shape
   of the palette cards this was chosen from. Three working values:

     --kat-pastel   the fill: appointment tile, primary action, the
                    selected chip, the picker tile. Carries INK.
     --kat-tekst    the same colour taken deeper. Carries the category
                    where colour has to be TEXT — a price, a provider's
                    name — and draws the hairline around every pastel
                    fill.
     --kat-tih      the near-white chip, carrying --kat-na-tihem.

   Every one of them has an -o twin. The -o is NOT a second theme: it is
   the same category seen on the ONE inverted surface a view is allowed
   (.poudarek). On an ink card the pastel still works but --kat-tekst
   cannot, so the twin steps to the other polarity. When the espresso
   theme was removed the -o values stayed exactly as they were, because
   the inverted card did not go anywhere.

   Two decisions are worth keeping, because both were wrong first.

   INK ON THE PASTEL, not a light label. The cards this comes from put
   a light word on the soft colour, and that pair does not reach 2:1.
   The same pastel with ink measures 9.9–10.8:1. The colour survives
   intact; only the writing on it changes.

   A HAIRLINE, not a darker fill. A pastel block on the page measures
   1.3–2.2:1 — nearly invisible. Darkening it would destroy the one
   thing that makes it beautiful, so the block keeps a 1px edge in
   --kat-tekst and the EDGE is what gets measured.

   ── How it is built ────────────────────────────────────────────────

   In OKLab, where lightness is separated from colourfulness. The same
   nominal lightness reads far darker in blue than in yellow, and ten
   categories picked by hand in hexadecimal would drift apart.

   The ground sits at lightness 0.945 and barely any colour (0.024),
   leaning only 18 % of the way toward the partner: the page is the
   brand's, the partner is the content's. The pastel sits at 0.845.
   --kat-tekst is the only value SOLVED rather than set: its lightness
   moves away from the ground until it clears 4.5:1 against every
   surface it can land on — the page, the card, the chip, and Termina's
   own neutral, because a mixed list is nobody's category.

   Measured, every category: the lowest pair anywhere is 4.55:1 against
   a threshold of 4.5. server/test-kategorije.js counts all of them and
   fails on any one.

   The QUIET CHIP on the inverted card is solved to 5.4, not to 4.55,
   and the extra is not caution. A ratio computed from two hex values is
   the ratio of the two ideal surfaces; what a reader sees is a letter
   drawn with antialiased edges, and those edges lie between the two.
   The chips first sat at 4.8 nominal and the pixel measurer read 4.49
   on the rendered screen — a pass in CSS and a fail on the glass.
   The ground is the value that yields, because --kat-tekst is solved
   against every other surface as well and moving it would move those.

   ── Where it applies ───────────────────────────────────────────────

   The category is data-kat on a container. Two levels of commitment:

     the colour alone   a row in a list, a chip, a price, a date tile.
                        Every row in a feed belongs to a different
                        provider, so colour rides the row, never the
                        page.
     .kat-oder          the whole view in the category's light, for a
                        page about ONE provider. A list never takes it:
                        ten tinted grounds is a swatch book.
   ═══════════════════════════════════════════════════════════════════ */

/* Ink on the pastel, everywhere: the pastel is light on the page and on
   the inverted card alike. */
:root { --kat-na-pastelu: #241C14 }

/* Neutral: Termina's own, for any view without a category.
   :root:root, ne :root — gl. podoba.css: goli :root izgubi proti plasti
   prejšnje identitete. */
:root:root {
  --kat-pastel:     #E2D5C2;
  --kat-tekst:      #7c6455;
  --kat-tih:        #F1EDE7;
  --kat-na-tihem:   #241C14;
  --kat-pastel-o:   #E2D5C2;
  --kat-tekst-o:    #b29d8e;
  --kat-tih-o:      #42362c;
  --kat-na-tihem-o: #d3c4b6;
  /* Written out rather than referred to: a token pointing back at the
     one it replaces is a cycle, and CSS drops both ends without saying
     so. This way .kat-oder without a category changes nothing. */
  /* Brez kategorije je lestvica lestvica strani — od v10 bela. Barvane
     ostajajo samo skupine spodaj; te so identiteta in se ne belijo. */
  --kat-ohisje:     #FFFFFF;
  --kat-globina:    #F3EFE9;
  --kat-noc:        #F6F2EC;
  --kat-plosca:     #FFFFFF;
  --kat-plosca-hi:  #FFFFFF;
  --kat-i-bg:       #1C1714;
  --kat-i-bg-2:     #2a2119;
  --kat-i-cip:      #2a2119;
  --kat-foto-1:     #4a3826;
  --kat-foto-2:     #31251a;
}
[data-kat="frizer"] {
  --kat-pastel:#ecbfc6;
  --kat-tekst:#925863;
  --kat-tih:#f5dce0; --kat-na-tihem:#241C14;
  --kat-pastel-o:#ecbfc6;
  --kat-tekst-o:#cb8c97;
  --kat-tih-o:#382323; --kat-na-tihem-o:#cb8c97;
  --kat-ohisje:#fae9de;
  --kat-globina:#f0dacb;
  --kat-noc:#f3ded0;
  --kat-plosca:#fdf1e8;
  --kat-plosca-hi:#fff7f1;
  --kat-i-bg:#221710;
  --kat-i-bg-2:#32241c;
  --kat-i-cip:#32241c;
  --kat-foto-1:#5b403e;
  --kat-foto-2:#3d2726;
}
[data-kat="lepota"] {
  --kat-pastel:#a5d6df;
  --kat-tekst:#1a6e7b;
  --kat-tih:#cee8ed; --kat-na-tihem:#241C14;
  --kat-pastel-o:#a5d6df;
  --kat-tekst-o:#54a1ae;
  --kat-tih-o:#2d1e0f; --kat-na-tihem-o:#54a1ae;
  --kat-ohisje:#f2eddb;
  --kat-globina:#e6dfc8;
  --kat-noc:#e9e3cd;
  --kat-plosca:#f7f3e6;
  --kat-plosca-hi:#fbf9f0;
  --kat-i-bg:#20170e;
  --kat-i-bg-2:#30251a;
  --kat-i-cip:#30251a;
  --kat-foto-1:#384e3e;
  --kat-foto-2:#213326;
}
[data-kat="telo"] {
  --kat-pastel:#c2d3af;
  --kat-tekst:#5a6f3d;
  --kat-tih:#dde7d3; --kat-na-tihem:#241C14;
  --kat-pastel-o:#c2d3af;
  --kat-tekst-o:#8ea671;
  --kat-tih-o:#292a18; --kat-na-tihem-o:#8ea671;
  --kat-ohisje:#f6ebdb;
  --kat-globina:#ebddc8;
  --kat-noc:#eee1cd;
  --kat-plosca:#faf2e6;
  --kat-plosca-hi:#fdf8f0;
  --kat-i-bg:#21170f;
  --kat-i-bg-2:#31251b;
  --kat-i-cip:#31251b;
  --kat-foto-1:#4c4830;
  --kat-foto-2:#312e1b;
}
[data-kat="fotograf"] {
  --kat-pastel:#e6c5aa;
  --kat-tekst:#8a5f39;
  --kat-tih:#f1dfd0; --kat-na-tihem:#241C14;
  --kat-pastel-o:#e6c5aa;
  --kat-tekst-o:#c3956d;
  --kat-tih-o:#362517; --kat-na-tihem-o:#c3956d;
  --kat-ohisje:#f8eadc;
  --kat-globina:#eedbc9;
  --kat-noc:#f1e0ce;
  --kat-plosca:#fcf1e7;
  --kat-plosca-hi:#fff7f0;
  --kat-i-bg:#21170f;
  --kat-i-bg-2:#32251b;
  --kat-i-cip:#32251b;
  --kat-foto-1:#584333;
  --kat-foto-2:#3a2a1e;
}
[data-kat="ustvarjanje"] {
  --kat-pastel:#d6cca6;
  --kat-tekst:#72642b;
  --kat-tih:#e8e3ce; --kat-na-tihem:#241C14;
  --kat-pastel-o:#d6cca6;
  --kat-tekst-o:#a5965d;
  --kat-tih-o:#2e1e10; --kat-na-tihem-o:#a5965d;
  --kat-ohisje:#f7ebdc;
  --kat-globina:#ecdcc8;
  --kat-noc:#f0e0ce;
  --kat-plosca:#fbf2e7;
  --kat-plosca-hi:#fef8f0;
  --kat-i-bg:#21170f;
  --kat-i-bg-2:#31251b;
  --kat-i-cip:#31251b;
  --kat-foto-1:#534630;
  --kat-foto-2:#362c1b;
}
[data-kat="dom"] {
  --kat-pastel:#ebc1b3;
  --kat-tekst:#915b48;
  --kat-tih:#f4ddd5; --kat-na-tihem:#241C14;
  --kat-pastel-o:#ebc1b3;
  --kat-tekst-o:#cb907b;
  --kat-tih-o:#39241c; --kat-na-tihem-o:#cb907b;
  --kat-ohisje:#f9eadd;
  --kat-globina:#efdbca;
  --kat-noc:#f2dfcf;
  --kat-plosca:#fdf1e7;
  --kat-plosca-hi:#fff7f1;
  --kat-i-bg:#211710;
  --kat-i-bg-2:#32241b;
  --kat-i-cip:#32241b;
  --kat-foto-1:#5a4137;
  --kat-foto-2:#3c2921;
}
[data-kat="vozila"] {
  --kat-pastel:#b4cfee;
  --kat-tekst:#466b94;
  --kat-tih:#d6e5f6; --kat-na-tihem:#241C14;
  --kat-pastel-o:#b4cfee;
  --kat-tekst-o:#7aa1cd;
  --kat-tih-o:#242932; --kat-na-tihem-o:#7aa1cd;
  --kat-ohisje:#fce8e2;
  --kat-globina:#f3d8d1;
  --kat-noc:#f6ddd5;
  --kat-plosca:#fff0eb;
  --kat-plosca-hi:#fff7f4;
  --kat-i-bg:#221611;
  --kat-i-bg-2:#33241d;
  --kat-i-cip:#33241d;
  --kat-foto-1:#4d4258;
  --kat-foto-2:#322a3a;
}
[data-kat="zivali"] {
  --kat-pastel:#acd8c6;
  --kat-tekst:#31745d;
  --kat-tih:#d1eae0; --kat-na-tihem:#241C14;
  --kat-pastel-o:#acd8c6;
  --kat-tekst-o:#68aa91;
  --kat-tih-o:#1c2b21; --kat-na-tihem-o:#68aa91;
  --kat-ohisje:#f4ecdb;
  --kat-globina:#e8dec8;
  --kat-noc:#ece2cd;
  --kat-plosca:#f9f3e6;
  --kat-plosca-hi:#fcf8f0;
  --kat-i-bg:#21170f;
  --kat-i-bg-2:#31251a;
  --kat-i-cip:#31251a;
  --kat-foto-1:#424c35;
  --kat-foto-2:#2a311f;
}
[data-kat="znanje"] {
  --kat-pastel:#cfc6eb;
  --kat-tekst:#6e6192;
  --kat-tih:#e5e0f4; --kat-na-tihem:#241C14;
  --kat-pastel-o:#cfc6eb;
  --kat-tekst-o:#a496cb;
  --kat-tih-o:#2e2630; --kat-na-tihem-o:#a496cb;
  --kat-ohisje:#fce8e0;
  --kat-globina:#f2d9ce;
  --kat-noc:#f5ddd3;
  --kat-plosca:#fff0ea;
  --kat-plosca-hi:#fff7f3;
  --kat-i-bg:#221610;
  --kat-i-bg-2:#32241c;
  --kat-i-cip:#32241c;
  --kat-foto-1:#554050;
  --kat-foto-2:#382834;
}
[data-kat="dogodki"] {
  --kat-pastel:#e4c0d7;
  --kat-tekst:#8a5979;
  --kat-tih:#f0dce9; --kat-na-tihem:#241C14;
  --kat-pastel-o:#e4c0d7;
  --kat-tekst-o:#c28eb0;
  --kat-tih-o:#362429; --kat-na-tihem-o:#c28eb0;
  --kat-ohisje:#fbe9de;
  --kat-globina:#f1dacc;
  --kat-noc:#f4ded1;
  --kat-plosca:#fef0e9;
  --kat-plosca-hi:#fff7f3;
  --kat-i-bg:#221710;
  --kat-i-bg-2:#32241c;
  --kat-i-cip:#32241c;
  --kat-foto-1:#5a3f45;
  --kat-foto-2:#3c272c;
}

/* ── the inverted surface ─────────────────────────────────────────── */

/* Termina shows one inverted surface per view (.poudarek): ink. The
   pastel does not need to move — it is light on both — but --kat-tekst
   does, because on the
   inverted card it has to be the other polarity. A surface inverted by
   hand rather than by this class — .publine on the dashboard, painted
   with --sij — reads --kat-tekst-o directly. */
.poudarek {
  --kat-pastel:    var(--kat-pastel-o);
  --kat-tekst:     var(--kat-tekst-o);
  --kat-tih:       var(--kat-tih-o);
  --kat-na-tihem:  var(--kat-na-tihem-o);
}

/* ── the category's stage ─────────────────────────────────────────── */

/* One class, on the body of a page about a single provider. Every
   surface token in podoba.css is handed over to the category's own, so
   nothing downstream needs to know a category exists. */
.kat-oder {
  --ohisje:     var(--kat-ohisje);
  --globina:    var(--kat-globina);
  --noc:        var(--kat-noc);
  --plosca:     var(--kat-plosca);
  --plosca-hi:  var(--kat-plosca-hi);
  --kartica:    var(--kat-plosca);
  --mleko:      var(--kat-plosca-hi);
  --papir-2:    var(--kat-plosca-hi);
  --vdolbina:   var(--kat-plosca-hi);
  --vdolbina-2: var(--kat-plosca-hi);
  --i-bg:       var(--kat-i-bg);
  --i-bg-2:     var(--kat-i-bg-2);
  --i-cip:      var(--kat-i-cip);
  --oder-1:     var(--kat-foto-1);
  --oder-2:     var(--kat-foto-2);
  background: var(--ohisje);
}

/* ── what the colour is allowed to do ─────────────────────────────── */

/* One primary action per view. The second selector is not decoration:
   the inverted surface styles .btn-p at two-class specificity, and the
   colour has to be the last word on the one button that carries it. */
.kat-dej,
.poudarek .kat-dej {
  background: var(--kat-pastel);
  border-color: var(--kat-tekst);
  color: var(--kat-na-pastelu);
}
.kat-dej:hover,
.poudarek .kat-dej:hover {
  background: var(--kat-pastel);
  border-color: var(--kat-tekst);
  color: var(--kat-na-pastelu);
  filter: brightness(1.04);
}

/* Chips and status pills: the near-white tone, with the deeper sibling
   as text. */
.kat-cip,
.poudarek .kat-cip {
  background: var(--kat-tih);
  color: var(--kat-na-tihem);
  border: 1px solid transparent;
}
/* A selected chip becomes the fill, not a louder tint. */
.kat-cip.sel,
.poudarek .kat-cip.sel {
  background: var(--kat-pastel);
  color: var(--kat-na-pastelu);
  border-color: var(--kat-tekst);
}

/* Prices and figures the category owns: colour as TEXT, so the deeper
   sibling, never the pastel. */
.kat-cena { color: var(--kat-tekst) }

/* A pastel block and the hairline that makes it visible. Fill and edge
   always travel together — the fill alone measures 1.3–2.2:1 against
   Termina's cream and would read as a smudge. */
.kat-ploskev {
  background: var(--kat-pastel);
  border: 1px solid var(--kat-tekst);
  color: var(--kat-na-pastelu);
}
.kat-rob { border-color: var(--kat-tekst) }

/* The wordmark's circle never follows the category. It is the brand's
   own mark and stays #8a5b26 — see podoba.css. A category that could recolour the wordmark would make
   the brand a property of whoever is being viewed. */