/* ============================================================================
 * zen/components/token-card/token-card.css
 * ----------------------------------------------------------------------------
 * Animated card that represents a token, certificate, or secret in transit
 * between system components. Appears with a scale-in pop, rides along a
 * Bézier path, then fades as it gets consumed.
 *
 * HTML:
 *   <div class="zen-token" id="tok">TOKEN 5f8a…c2d1</div>
 *
 * Apply a color variant via `data-kind` OR legacy class:
 *   <div class="zen-token" data-kind="cert">X.509</div>
 *   <div class="zen-token zen-token--jwt">eyJhbGci…</div>
 *
 * Positioned dynamically by JS (see zen.token.set + zen.token.animate).
 *
 * Legacy alias: `.o-token-card` (same .jwt / .sa / .cert variants).
 * ============================================================================ */

.zen-token, .o-token-card {
    position: absolute;
    z-index: 4;
    min-width: 150px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--yellow);
    background: linear-gradient(145deg, #1a1505, #2a2008);
    color: var(--yellow);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    text-align: center;
    letter-spacing: 0.5px;
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.4);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition: all 0.6s var(--ease-natural);
}

.zen-token.show, .o-token-card.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Default kind (token — yellow) already applied above. ---------------------
 * Other kinds: jwt (violet), sa (blue), cert (green), secret (yellow — same as default) */

.zen-token[data-kind="jwt"],
.zen-token--jwt,
.o-token-card.jwt {
    border-color: var(--violet);
    color: var(--violet);
    box-shadow: 0 0 25px rgba(124, 58, 237, 0.4);
    background: linear-gradient(145deg, #1a0f2e, #2d1b4e);
}

.zen-token[data-kind="sa"],
.zen-token--sa,
.o-token-card.sa {
    border-color: var(--blue);
    color: var(--blue);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
    background: linear-gradient(145deg, #0a1628, #132648);
}

.zen-token[data-kind="cert"],
.zen-token--cert,
.o-token-card.cert {
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 25px rgba(0, 230, 118, 0.4);
    background: linear-gradient(145deg, #0f2922, #1a3f35);
}

.zen-token[data-kind="token"],
.zen-token--token,
.o-token-card.token {
    /* Same as default — explicit for symmetry */
    border-color: var(--yellow);
    color: var(--yellow);
}

/* Optional inline SVG icon slot — modules can stamp an <svg> inline at the
 * start of the card (stroke-based). We keep the pre-icon slot padded so the
 * label stays centered whether or not an icon is present.
 * Project convention: NO unicode/emoji icons — use SVG stroke-based icons. */
.zen-token__icon {
    display: inline-block;
    vertical-align: middle;
    width: 14px; height: 14px;
    margin-right: 6px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

/* Variants ---------------------------------------------------------------- */
.zen-token--compact { padding: 4px 10px; font-size: 0.75rem; min-width: 100px; }