/* R6: profile accent presets. Keys mirror User::ACCENT_PRESETS —
   keep the two lists in sync. Raw hex lives only here (CSP: no inline styles). */

.accent-violet { --profile-accent: #7c5cbf; }
.accent-rose { --profile-accent: #bf5c7c; }
.accent-meadow { --profile-accent: #5cbf7c; }
.accent-gold { --profile-accent: #bf9a5c; }
.accent-sky { --profile-accent: #5c9abf; }
.accent-orchid { --profile-accent: #9a5cbf; }
.accent-teal { --profile-accent: #5cbfbf; }
.accent-ember { --profile-accent: #bf5c5c; }

/* Swatch row on /account */
.accent-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.accent-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background-color: var(--profile-accent, var(--color-surface));
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition);
}

.accent-swatch:hover {
    transform: scale(1.12);
}

.accent-swatch--active {
    border-color: var(--color-text);
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 12px var(--profile-accent, transparent);
}

.accent-swatch--none {
    background:
        linear-gradient(to top left, transparent 46%, var(--color-text-muted) 48%, var(--color-text-muted) 52%, transparent 54%),
        var(--color-surface);
}