/* Ledger categorical colour ramp
   Added 2 Sept 2026. This is an ADDITION, not a revision: tokens.css stays
   frozen. Import after tokens.css.

   Two colour systems live in this app and they are told apart by SATURATION,
   not by hue.

     SEMANTIC   vivid, 59 to 100 percent saturation. Reserved. Each one means
                exactly one thing, app wide. Defined in tokens.css.
     CATEGORICAL chalky, 28 percent saturation. Means nothing on its own.
                Exists only to tell N things apart.

   A categorical colour sits 31 saturation points below the least saturated
   semantic colour, so even where hues nearly coincide (cove is 3 degrees from
   Assist Cyan, harbour 5 from Action Blue) the two never read as the same
   system. Minimum separation inside the ramp is 34 degrees. Minimum contrast
   on Engine Black is 7.4 to 1.

   WHO DRAWS FROM THIS RAMP
     session tab groups, granular emitters, contributor identity, L and R lane
     pairing, sampler key zones, and any future feature that needs to tell one
     thing from another without saying anything about state.

   HOW TO ASSIGN
     By index, deterministically, no designer in the loop:
       const CAT = ['straw','moss','sage','cove','harbour','iris','orchid','rose'];
       const tone = i => CAT[i % 8];              // tier 1 for the first eight
       const tier = i => i < 8 ? '' : '-deep';    // tier 2 beyond that
     Never pick one by eye, never let a feature invent a ninth hue. If you need
     more than sixteen distinguishable things on one screen, colour is the
     wrong channel and you need shape or grouping instead.
*/

:root{
  --cat-straw: #C4BA97;
  --cat-moss: #A9C497;
  --cat-sage: #97C4A6;
  --cat-cove: #97BDC4;
  --cat-harbour: #97A3C4;
  --cat-iris: #AC97C4;
  --cat-orchid: #C497BE;
  --cat-rose: #C497A3;

  /* tier 2, for indexes 8 to 15. Same hues, lower lightness. */
  --cat-straw-deep: #A1915E;
  --cat-moss-deep: #79A15E;
  --cat-sage-deep: #5EA174;
  --cat-cove-deep: #5E96A1;
  --cat-harbour-deep: #5E70A1;
  --cat-iris-deep: #7D5EA1;
  --cat-orchid-deep: #A15E98;
  --cat-rose-deep: #A15E70;

  /* the washes and hairlines these are used with, so a pill built from the
     ramp looks the same wherever it is built */
  --cat-wash-alpha:  0.14;
  --cat-edge-alpha:  0.34;
}

/* Reference implementation of a categorical pill. Copy the shape, not the
   colour: the colour comes in as --c from the assignment above. */
.cat-pill{
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent);
  border-radius: 14px;
  padding: 5px 13px;
}