/* Transaction category stripes.
 *
 * TransactionsHelper#category_color maps each of the ~117 categories to one of
 * these slots. The slot names came from the palette the maps originally used,
 * so a category keeps the colour it had.
 *
 * Every slot is the same lightness and chroma at a different hue, so the
 * stripes read as one family. Lightness sits mid-ramp so a single value works
 * on both the light and dark canvas.
 */
@layer components {
  [data-category-color] {
    --cat-l: 63%;
    --cat-c: 0.19;
    --cat-l-deep: 47%;
    --cat-c-deep: 0.15;

    /* border_for falls back to gray-500, which has no hue of its own */
    --category-color: var(--color-ink-medium);

    &[data-category-color="red-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 27); }
    &[data-category-color="red-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 27); }
    &[data-category-color="rose-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 12); }
    &[data-category-color="rose-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 12); }
    &[data-category-color="orange-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 45); }
    &[data-category-color="orange-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 45); }
    &[data-category-color="amber-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 70); }
    &[data-category-color="amber-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 70); }
    &[data-category-color="yellow-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 90); }
    &[data-category-color="yellow-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 90); }
    &[data-category-color="lime-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 125); }
    &[data-category-color="lime-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 125); }
    &[data-category-color="green-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 145); }
    &[data-category-color="green-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 145); }
    &[data-category-color="emerald-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 160); }
    &[data-category-color="emerald-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 160); }
    &[data-category-color="teal-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 180); }
    &[data-category-color="teal-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 180); }
    &[data-category-color="cyan-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 210); }
    &[data-category-color="cyan-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 210); }
    &[data-category-color="sky-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 235); }
    &[data-category-color="sky-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 235); }
    &[data-category-color="blue-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 260); }
    &[data-category-color="blue-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 260); }
    &[data-category-color="indigo-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 275); }
    &[data-category-color="indigo-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 275); }
    &[data-category-color="violet-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 292); }
    &[data-category-color="violet-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 292); }
    &[data-category-color="purple-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 310); }
    &[data-category-color="purple-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 310); }
    &[data-category-color="fuschia-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 328); }
    &[data-category-color="fuschia-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 328); }
    &[data-category-color="pink-500"] { --category-color: oklch(var(--cat-l) var(--cat-c) 350); }
    &[data-category-color="pink-700"] { --category-color: oklch(var(--cat-l-deep) var(--cat-c-deep) 350); }
  }
}