/* Theme V2: semantic tier palette + transitional surface helpers.
   Canonical low-level utilities live in core.css. */

:root {
  --tier-wood: #8b6914;
  --tier-bronze: #b7814e;
  --tier-silver: #b4aea7;
  --tier-gold: var(--k-yellow-light);
  --tier-platinum: #d9d2c8;
  --tier-diamond: var(--k-cyan-light);
  --tier-legendary: var(--k-orange);

  --tier-wood-soft: rgba(139, 105, 20, 0.15);
  --tier-bronze-soft: rgba(183, 129, 78, 0.15);
  --tier-silver-soft: rgba(180, 174, 167, 0.15);
  --tier-gold-soft: rgba(212, 185, 138, 0.15);
  --tier-platinum-soft: rgba(217, 210, 200, 0.15);
  --tier-diamond-soft: rgba(138, 170, 191, 0.15);
  --tier-legendary-soft: rgba(200, 122, 82, 0.15);
}

.kp-medal-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.kp-medal-badge__icon {
  font-size: 24px;
  padding: 8px;
  border-radius: var(--k-radius-lg);
  border: 2px solid;
  background: var(--k-bg-elevated);
}

.kp-medal-badge__tier {
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-semibold);
}

.kp-rank {
  font-weight: var(--k-weight-extrabold);
}

.kp-rank--top {
  color: var(--k-text-primary);
}

.kp-rank--normal {
  color: var(--k-text-muted);
}

.kp-balance {
  font-size: var(--k-text-sm);
  color: var(--k-yellow);
  font-weight: var(--k-weight-extrabold);
}

.kp-surface--base {
  background: var(--k-surface-1);
  border: 1px solid var(--k-border-subtle);
  box-shadow: var(--k-shadow-card);
}

.kp-surface--raised {
  background: var(--k-surface-2);
  border: 1px solid var(--k-border-default);
  box-shadow: var(--k-shadow-soft);
}

.kp-surface--glass {
  background: var(--k-panel);
  border: 1px solid var(--k-glass-border);
  backdrop-filter: blur(var(--k-glass-blur));
  -webkit-backdrop-filter: blur(var(--k-glass-blur));
}

.kp-border-warm { border-color: var(--k-border-default); }
.kp-border-accent { border-color: var(--k-border-accent); }
.kp-bg-brand-soft { background: var(--k-primary-soft); }
.kp-bg-sage-soft { background: var(--k-green-soft); }
.kp-bg-sand-soft { background: var(--k-yellow-soft); }
.kp-bg-clay-soft { background: var(--k-red-soft); }
.kp-shadow-card { box-shadow: var(--k-shadow-card); }
.kp-shadow-soft { box-shadow: var(--k-shadow-soft); }
.kp-shadow-floating { box-shadow: var(--k-shadow-floating); }
.kp-ring-focus { box-shadow: var(--k-ring-focus); }