/* ─────────────────────────────────────────────────────────────────
 * KIN Empire Icon CSS · 2026-05-08
 * Drop-in styling for kin-icons.svg sprite
 *
 * Usage:
 *   <link rel="stylesheet" href="/assets/kin-icons.css">
 *   <svg class="kin-ico"><use href="/assets/kin-icons.svg#kin-strategist"/></svg>
 *
 * Sizing variants: .kin-ico.sm | .kin-ico | .kin-ico.lg | .kin-ico.xl
 * Color: inherits currentColor · override per surface via parent color
 * ───────────────────────────────────────────────────────────────── */

.kin-ico {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}

.kin-ico.sm { width: 16px; height: 16px; }
.kin-ico.lg { width: 32px; height: 32px; }
.kin-ico.xl { width: 48px; height: 48px; }
.kin-ico.xxl { width: 72px; height: 72px; }

/* ─────────────────────────────────────────────────────────────────
 * The canonical glassmorphic pillow (Mo's existing .seat .ico recipe
 * from mirzatech.ai/council/index.html · memory #60). Wrap any
 * <svg class="kin-ico"> in a .kin-pillow to get the full empire look.
 * ───────────────────────────────────────────────────────────────── */

.kin-pillow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: radial-gradient(ellipse 100% 80% at 30% 30%,
    rgba(0, 210, 255, 0.22),
    rgba(140, 80, 255, 0.18) 60%,
    rgba(7, 10, 16, 0.9) 100%);
  border: 1px solid rgba(0, 210, 255, 0.3);
  box-shadow:
    0 14px 32px -14px rgba(0, 210, 255, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 -8px 16px -8px rgba(140, 80, 255, 0.4) inset;
  position: relative;
  overflow: hidden;
  color: #f0f8ff;
  transition: transform 0.2s, border-color 0.2s;
}

.kin-pillow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 35%,
    transparent 65%,
    rgba(140, 80, 255, 0.18) 100%);
  pointer-events: none;
}

.kin-pillow::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 6%;
  height: 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.kin-pillow .kin-ico {
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.5));
  stroke: #f0f8ff;
}

.kin-pillow:hover {
  transform: translateY(-2px) rotate(-1deg);
  border-color: rgba(0, 210, 255, 0.6);
}

.kin-pillow:hover::after {
  height: 35%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent);
}

/* size variants for the pillow */
.kin-pillow.sm { width: 40px; height: 40px; border-radius: 10px; }
.kin-pillow.sm .kin-ico { width: 20px; height: 20px; }
.kin-pillow.lg { width: 80px; height: 80px; border-radius: 18px; }
.kin-pillow.lg .kin-ico { width: 40px; height: 40px; }

/* ─────────────────────────────────────────────────────────────────
 * Brand-aware color overrides
 *   Default brand uses cyan #00d2ff
 *   Per-domain themes can override via [data-brand]
 * ───────────────────────────────────────────────────────────────── */

[data-brand="iamsuperio.io"] .kin-pillow {
  background: radial-gradient(ellipse 100% 80% at 30% 30%,
    rgba(212, 175, 55, 0.22),
    rgba(30, 64, 175, 0.18) 60%,
    rgba(7, 10, 16, 0.9) 100%);
  border-color: rgba(212, 175, 55, 0.3);
}

[data-brand="iamsuperio.org"] .kin-pillow {
  background: radial-gradient(ellipse 100% 80% at 30% 30%,
    rgba(124, 58, 237, 0.22),
    rgba(245, 158, 11, 0.18) 60%,
    rgba(7, 10, 16, 0.9) 100%);
  border-color: rgba(124, 58, 237, 0.3);
}

[data-brand="iamsuperio.com"] .kin-pillow {
  background: radial-gradient(ellipse 100% 80% at 30% 30%,
    rgba(22, 163, 74, 0.22),
    rgba(249, 115, 22, 0.18) 60%,
    rgba(7, 10, 16, 0.9) 100%);
  border-color: rgba(22, 163, 74, 0.3);
}