/* Asset classes carry a hue wherever they appear — the list rows, the
 * rebalance groups. Set on any element via data-asset-class, read as
 * --asset-color. Slugs come from HoldingsHelper#asset_class_token. */
@layer components {
  [data-asset-class] {
    /* Falls back to the "unknown asset class" hue */
    --asset-color: oklch(var(--lch-aqua-darker));

    /* US equities step lighter as they move down the cap scale */
    &[data-asset-class="us-total-market"]         { --asset-color: oklch(var(--lch-blue-darker)); }
    &[data-asset-class="us-large-cap"]            { --asset-color: oklch(var(--lch-blue-dark)); }
    &[data-asset-class="us-mid-cap"]              { --asset-color: oklch(var(--lch-blue-medium)); }
    &[data-asset-class="us-small-cap"]            { --asset-color: oklch(var(--lch-blue-light)); }

    &[data-asset-class="international-developed"] { --asset-color: oklch(var(--lch-green-darker)); }
    &[data-asset-class="international-emerging"]  { --asset-color: oklch(var(--lch-green-dark)); }

    &[data-asset-class="bonds"],
    &[data-asset-class="gold"],
    &[data-asset-class="dividend"]                { --asset-color: oklch(var(--lch-yellow-dark)); }

    &[data-asset-class="cash"]                    { --asset-color: oklch(var(--lch-ink-dark)); }
    &[data-asset-class="other"]                   { --asset-color: oklch(var(--lch-pink-dark)); }
    &[data-asset-class="tech"]                    { --asset-color: oklch(var(--lch-aqua-dark)); }
    &[data-asset-class="auto"]                    { --asset-color: oklch(var(--lch-red-dark)); }
    &[data-asset-class="pharmaceuticals"]         { --asset-color: oklch(var(--lch-violet-dark)); }

    &[data-asset-class="real-estate"],
    &[data-asset-class="reit"]                    { --asset-color: oklch(var(--lch-aqua-medium)); }

    &[data-asset-class="energy"]                  { --asset-color: oklch(var(--lch-red-darker)); }
    &[data-asset-class="income"]                  { --asset-color: oklch(var(--lch-lime-dark)); }
  }

  /* Leading edge marker, used by holding rows and rebalance groups */
  .asset-edge {
    border-inline-start: 4px solid var(--asset-color);
  }
}