/**
 * iNKPPL Design System — Tier Ring Component
 * Subscription tier visual encoding via CSS outline.
 * Apply as a modifier class on any circular element.
 *
 * Usage:  <div class="card__avatar tier-ring--plus">
 *         <div class="card__avatar tier-ring--profi tier-ring--lg">
 *
 * Uses CSS outline (not border) — zero layout impact.
 * Tokens: --color-tier-*, --tier-ring-width, --tier-ring-gap
 *
 * @version 1.0.0
 * @date 2026-04-21
 */

/* ==========================================================================
   Base tier ring — shared outline structure
   ========================================================================== */

.tier-ring--standard,
.tier-ring--plus,
.tier-ring--profi {
  outline-style: solid;
  outline-width: var(--tier-ring-width);
  outline-offset: var(--tier-ring-gap);
}

/* ==========================================================================
   Tier variants
   ========================================================================== */

.tier-ring--standard {
  outline-color: var(--color-tier-standard);
}

.tier-ring--plus {
  outline-color: var(--color-tier-plus);
}

.tier-ring--profi {
  outline-color: var(--color-tier-profi);
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.35);
}

/* ==========================================================================
   Size modifiers — override token defaults locally
   ========================================================================== */

.tier-ring--sm {
  --tier-ring-width: 2px;
  --tier-ring-gap: 2px;
}

.tier-ring--lg {
  --tier-ring-width: 4px;
  --tier-ring-gap: 4px;
}