/* ══════════════════════════════════════════════════════════════════
   SuperCat DS — Icon wrapper primitive  ·  .ki
   ──────────────────────────────────────────────────────────────────
   ▸ Class prefix: `.ki` = "kit icon"
   ▸ Non-functional, non-interactive decorative wrapper for an icon.
     Use for marketing pages, feature lists, empty-state visuals,
     branded glyphs. Never for actions — those are `.kb kb-icon`.
   ▸ Compose: base + size + shape + tone.
       <span class="ki ki-lg ki-circle ki-primary">
         <svg viewBox="0 0 24 24">…</svg>
       </span>
   ▸ Sizes scale from xs (24px) to 3xl (128px) for hero-scale art.
   ▸ Pure CSS. Framework-agnostic. No JS, no transitions, no hover.
   ──────────────────────────────────────────────────────────────────

   API
     <span class="ki ki-md ki-rounded ki-neutral"><svg>…</svg></span>

   Sizes  : ki-xs (24)  ki-sm (32)  ki-md (40, default)  ki-lg (56)
            ki-xl (72)  ki-2xl (96)  ki-3xl (128)
   Shapes : ki-square (radius-sm)  ki-rounded (radius-md, default)
            ki-pill (radius-lg)    ki-circle (radius-pill)
   Tones  : ki-neutral (default)  ki-primary  ki-accent  ki-gold
            ki-ghost
   ══════════════════════════════════════════════════════════════════ */

:where(.ki) {
  /* Component-local custom properties — override per-instance. */
  --ki-bg:     var(--surface-2);
  --ki-fg:     var(--text-primary);
  --ki-border: transparent;
  --ki-size:   40px;
  --ki-pad:    8px;          /* inner padding around the SVG */
  --ki-icon:   24px;         /* SVG size at ki-md */
  --ki-radius: var(--radius-md);
}

.ki {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ki-size);
  height: var(--ki-size);
  padding: var(--ki-pad);
  box-sizing: border-box;
  background: var(--ki-bg);
  color: var(--ki-fg);
  border: 1px solid var(--ki-border);
  border-radius: var(--ki-radius);
  /* No transition, no cursor — decorative only. */
}

.ki > svg {
  width: var(--ki-icon);
  height: var(--ki-icon);
  display: block;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── Sizes ──────────────────────────────────────────────────────
   Padding and inner SVG scale with the wrapper so glyphs stay
   visually proportional. The 40 % rule: SVG ≈ 60 % of wrapper.
   ──────────────────────────────────────────────────────────── */

.ki-xs  { --ki-size: 24px;  --ki-pad: 4px;  --ki-icon: 14px; }
.ki-sm  { --ki-size: 32px;  --ki-pad: 6px;  --ki-icon: 18px; }
.ki-md  { --ki-size: 40px;  --ki-pad: 8px;  --ki-icon: 24px; }   /* default */
.ki-lg  { --ki-size: 56px;  --ki-pad: 12px; --ki-icon: 28px; }
.ki-xl  { --ki-size: 72px;  --ki-pad: 16px; --ki-icon: 36px; }
.ki-2xl { --ki-size: 96px;  --ki-pad: 20px; --ki-icon: 48px; }
.ki-3xl { --ki-size: 128px; --ki-pad: 28px; --ki-icon: 64px; }

/* ── Shapes ─────────────────────────────────────────────────── */

.ki-square  { --ki-radius: var(--radius-sm); }
.ki-rounded { --ki-radius: var(--radius-md); }   /* default */
.ki-pill    { --ki-radius: var(--radius-lg); }
.ki-circle  { --ki-radius: var(--radius-pill); }

/* ── Tones ──────────────────────────────────────────────────────
   Each tone sets bg + fg in one go. Border is transparent by
   default; ghost gives it a hairline. All tones survive both
   themes through the semantic-token cascade. */

.ki-neutral {
  --ki-bg:     var(--surface-2);
  --ki-fg:     var(--text-primary);
  --ki-border: transparent;
}

.ki-primary {
  --ki-bg:     var(--action-primary-tint);
  --ki-fg:     var(--color-crimson);
  --ki-border: transparent;
}

.ki-accent {
  --ki-bg:     var(--color-ink-1);
  --ki-fg:     var(--color-paper-1);
  --ki-border: transparent;
}

.ki-gold {
  --ki-bg:     var(--color-gold-l);
  --ki-fg:     var(--color-gold);
  --ki-border: transparent;
}

.ki-ghost {
  --ki-bg:     transparent;
  --ki-fg:     var(--text-primary);
  --ki-border: var(--border-default);
}

/* ── Dark theme tweaks ──────────────────────────────────────── */

[data-theme="dark"] .ki-primary {
  --ki-bg: color-mix(in oklch, var(--color-crimson) 22%, transparent);
  --ki-fg: var(--text-crimson);
}
[data-theme="dark"] .ki-gold {
  --ki-bg: color-mix(in oklch, var(--color-gold) 22%, transparent);
  --ki-fg: var(--color-gold-l);
}