/* ============================================
   Tag – Block Component
   Variants: yellow (hashtag), green (hashtag), torn (label)
   ============================================ */

.tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
}

/* ---- Hashtag Yellow ---- */

.tag--yellow {
    background-color: var(--color-sun-yellow-30);
    color: var(--color-ink);
    border: 1px solid var(--color-sun-yellow);
    border-radius: var(--radius-hand);
    transform: rotate(2deg);
}

/* ---- Hashtag Green ---- */

.tag--green {
    background-color: var(--color-otto-green-20);
    color: var(--color-otto-dark);
    border: 1px solid var(--color-otto-green-50);
    border-radius: var(--radius-hand-alt);
    transform: rotate(-1deg);
}

/* ---- Torn Label ---- */

.tag--torn {
    background-color: var(--color-label-white);
    color: var(--color-papa-rust);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-paper-lift);
    transform: rotate(1deg);
}