@layer components {
/* ── Swatch palette ────────────────────────────────────── */
/* The ONE place a colour name (data-swatch) or meal type (data-meal) maps to
   the three role tokens every coloured chip reads. Consumed by: .tag-pill,
   .tag-option, .tag-swatch, .meal-pill, .meal-dot. Custom properties inherit,
   so setting the attribute on an ancestor themes its descendants too.
   To add a tag colour: add it to Tag::COLORS and add one row here. */
[data-swatch="sage"],     [data-meal="lunch"]     { --swatch-fg: var(--sage-fg);     --swatch-bg: var(--sage-bg);     --swatch-dot: var(--sage-dot); }
[data-swatch="rose"],     [data-meal="snack"]     { --swatch-fg: var(--rose-fg);     --swatch-bg: var(--rose-bg);     --swatch-dot: var(--rose-dot); }
[data-swatch="peach"],    [data-meal="breakfast"] { --swatch-fg: var(--peach-fg);    --swatch-bg: var(--peach-bg);    --swatch-dot: var(--peach-dot); }
[data-swatch="lavender"], [data-meal="dinner"]    { --swatch-fg: var(--lavender-fg); --swatch-bg: var(--lavender-bg); --swatch-dot: var(--lavender-dot); }
[data-swatch="mint"],     [data-meal="dessert"]   { --swatch-fg: var(--mint-fg);     --swatch-bg: var(--mint-bg);     --swatch-dot: var(--mint-dot); }
}