/**
 * Illusia — Rank Color Cascade (theme primitive)
 *
 * Sistema reutilizável pra colorir itens por posição/rank. Define três
 * custom properties que cascateiam pra qualquer descendente:
 *
 *   --illusia-rank-color       (HSL pronto, ex: var(--amber))
 *   --illusia-rank-color-free  (HSL components free pra hsl(... / .X))
 *   --illusia-rank-color-dim   (variante mais escura/dessaturada)
 *
 * Mapeamento padrão (alinhado com o resto do tema):
 *   rank 1 → crimson  (líder, peso editorial)
 *   rank 2 → violet   (espaço criativo)
 *   rank 3 → teal     (lateral acolhedora)
 *   default → amber   (cor primária do tema)
 *
 * Três formas de opt-in (escolha a que melhor se encaixar no seu markup):
 *
 * 1) **Classe modificadora** — quando você sabe a posição no PHP:
 *
 *    <li class="illusia-card illusia-card--ranking illusia-rank--1">
 *
 *    Útil pra cards que podem aparecer fora de ordem ou em listas
 *    paginadas (a posição não é nth-child do DOM).
 *
 * 2) **Atributo `data-rank`** — equivalente em capacidade ao classe
 *    modificadora, mas mais ergonômico quando você já tem `data-rank-
 *    position` ou similar:
 *
 *    <li data-rank="1">
 *
 * 3) **Container com `.illusia-rank-list`** — quando os filhos são
 *    naturalmente os top N em ordem visual:
 *
 *    <ol class="illusia-rank-list">
 *      <li>...top 1...</li>  ← :nth-child(1) pega crimson
 *      <li>...top 2...</li>  ← :nth-child(2) pega violet
 *      ...
 *    </ol>
 *
 *    Esta forma é a mais simples pra listas top-10 estáticas.
 *
 * Como consumir num componente:
 *
 *    .meu-card {
 *      border-left: 3px solid var(--illusia-rank-color);
 *      background: hsl(var(--illusia-rank-color-free) / .04);
 *    }
 *    .meu-card:hover {
 *      box-shadow: 0 0 18px hsl(var(--illusia-rank-color-free) / .12);
 *    }
 *
 * As variáveis são herdadas, então qualquer descendente de um item
 * marcado pode referenciá-las (metric pill, story title, etc).
 *
 * @package Illusia
 * @since   1.41.14
 */

/* ── Default — amber ───────────────────────────────────────────────────
   Aplicado em qualquer elemento que opte in via classe/atributo, e
   propagado a partir de containers `.illusia-rank-list` pros filhos.
   Os ranks 1-3 abaixo sobrescrevem essa base. */
.illusia-ranked,
[data-rank],
.illusia-rank-list > *,
.illusia-card,
.illusia-activity-item {
  --illusia-rank-color: var(--amber);
  --illusia-rank-color-free: var(--amber-free);
  --illusia-rank-color-dim: var(--amber-dim);
}

/* ── Top 1 — crimson ──────────────────────────────────────────────── */
.illusia-rank--1,
[data-rank="1"],
.illusia-rank-list > *:nth-child(1) {
  --illusia-rank-color: var(--crimson);
  --illusia-rank-color-free: var(--crimson-free);
  --illusia-rank-color-dim: var(--crimson-dim);
}

/* ── Top 2 — violet ───────────────────────────────────────────────── */
.illusia-rank--2,
[data-rank="2"],
.illusia-rank-list > *:nth-child(2) {
  --illusia-rank-color: var(--violet);
  --illusia-rank-color-free: var(--violet-free);
  --illusia-rank-color-dim: var(--violet-dim);
}

/* ── Top 3 — teal ─────────────────────────────────────────────────── */
.illusia-rank--3,
[data-rank="3"],
.illusia-rank-list > *:nth-child(3) {
  --illusia-rank-color: var(--teal);
  --illusia-rank-color-free: var(--teal-free);
  --illusia-rank-color-dim: var(--teal-dim);
}