/* === Header Tokens Display === */
.header-tokens {
    background-color: var(--card-bg);
    color: var(--accent-color);
    padding: 6px 12px;
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-right: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.header-tokens:hover {
    box-shadow: 0 2px 8px var(--shadow-light);
    transform: translateY(-1px);
}

/* Dark mode adjustments for tokens */
body:not(.light-mode) .header-tokens {
    background-color: var(--card-bg);
    color: var(--accent-color);
    border-color: var(--sidebar-border);
}